Question

I need to create this layout and I’d like to do as much of it as possible with CSS, rather than using images and whatever.

As such, how can I do this in CSS? (if at all?)

As you can see, there is the image behind, with the button overlaid with padding. The bit that I’m struggling with is creating the curves on the IMAGE above and to the left of the button and bottom to the right of the button (I’ve pointed them out on the pic below).

Any help would be great.

Thanks

Answer 1

You don’t have to split your image at all, only the container divs.

Let me detail a bit:
You can have your image set as a background image instead of putting it in a src attribute of an img tag. This technique is most commonly used when working with CSS sprites.

So, if you have you uppermost div at a constant width and height, if you try to apply the background image in it, you’ll see it fits very nice.

On the bottom, you have two divs or whatever block element you’ll like, just be sure to put fixed width and height, so the background will be applied and you will be able to actually see it.

Then all you have to do is fiddle with css background-position to adjust the SE chunk of image.

I’ll be putting a small demo together to better illustrate the idea.
After you have a big div at the top, and two smaller at the bottom, where two of them share the same background-image, but with different background-position, you can safely add some css3 border-radius to fit your roundness needs. You can also use some tool like http://css3generator.com/ to add a compatibility layer on all browsers with ease.