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

1 Answer 1


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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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