Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

How would you handle a background image for a web page with a curve like the one below? Normally, I take a thin image and repeat it along the x-axis, but the curve negates that strategy as one side is lower than the other. Ideally, I'd like to have the lines continue along their current path (even on larger monitors) without having to use a huge image for the whole thing. Any tricks or suggestions to do this in a way that doesn't kill my page size?

Curved background

share|improve this question
add comment

1 Answer

up vote 1 down vote accepted

One ugly solution I can think of right now is to create absolute positioned div at top-right corner of the page. Width of 50%, background color grey. In the middle there is your background. You can use another div to set the background for the other side for consistency, but it's much easier to set the proper background for your body.

You can improve this technique using multiple backgrounds (http://techknack.net/css-trick-two-background-images/) eliminating the need for divs, but introducing tiled images.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.