2

I have a gradient image as the background to my website and I am having problems making it look correct with all page sizes. The image is 291x1080 and I am having it do a repeat-x. This is fine with all pages that are no larger than 1080p. However, for a page with more content or a screen with a resolution larger than 1080p, a white space follows the background. I do not want to do a simple repeat-y because the gradient going from light to dark without a transition would be strange. Is there any way to flip the background image every time it does a repeat-y using CSS?

Franz Payer
  • 4,069
  • 15
  • 53
  • 77

2 Answers2

0

My suggestion: have the fabric texture and a gradient, not in an image.

For example:

body{
     background-image: url("/static/img/background.png") repeat, linear-gradient(top, #000000, #123456);
}

You should make sure you add the browser support tags (-webkit, etc)

For further reference check out this: How do I combine a background-image and CSS3 gradient on the same element?

Community
  • 1
  • 1
Oliver Cooper
  • 849
  • 7
  • 20
  • It repeats, but it has that that problem where it goes from light to dark without a transition. – Franz Payer Jan 07 '13 at 00:15
  • No, you need to remove the gradient from the fabric. – Oliver Cooper Jan 08 '13 at 04:46
  • Oh, I see what you mean now. Still is effectively the same as the other answer except with more texture. I don't have the ability to remove the gradient though. – Franz Payer Jan 08 '13 at 05:15
  • The texture looks identical to the iOS/Mac OSX Texture, really its up to you, but I think this method looks nicer. http://2.bp.blogspot.com/_UdH8rcs3s1Q/TGdcZB6sO3I/AAAAAAAAAKU/KrPuD_wmBC4/s1600/iPadBackgroundTexture-grey.png – Oliver Cooper Jan 10 '13 at 01:21
0

This is the css to do this:

body {
    ...
    background: #eeeeee url("/static/img/background.png") 0 0 repeat-x;
    ...
}
3dgoo
  • 15,716
  • 6
  • 46
  • 58
  • The problem with this is it isn't actually extending the texture, its just putting white(ish) space at the end. – Oliver Cooper Jan 06 '13 at 22:50
  • There is no texture at the bottom of the image. At the bottom it is solid #eeeeee. Have a look: http://www.cyberexplo.it/static/img/background.png – 3dgoo Jan 06 '13 at 22:52
  • I know, in my view, what he is trying to achieve is having the image repeat with out it looking odd. Your way is fine, but I'm not sure it's the desired result. – Oliver Cooper Jan 06 '13 at 22:54