How Should I Display This Background Using CSS?
When doing a background in css I am usually just using a gradient background that starts at the top, then eventually ends a solid color. So I slice up a thin layer of the gradient, repeat-x, then have the background set to a certain color
(background:#color url(image location.png) repeat-x)
However I am faced with a unique obstacle I need guidance on. I have the following:
- Background is a gradient
- However there is also a backg开发者_StackOverflow社区round image that is repeated
- Said background image is repeated until the end of the page
- See the image screenshot from the side of the mockup (http://www.petpinpoint.com/sidebar.png)
Thoughts on how I would implement this? I can't just slice it and repeat since the background needs to span the entire height of the page (which is dynamic and change).
You need two backgrounds with, but the gradient should be a semi transparent PNG
html {
background: #E6E6E6 url(/content/images/figure.png) repeat scroll 0 0;
height:100%;
width:100%;
}
body {
background: transparent url(/content/images/gradient.png) repeat-x right top;
height:100%;
width:100%;
}
Edit: for the always present IE6,
<!--[if lt IE 7]>
body {
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/content/images/gradient.png',sizingMethod='scale');
}
<![endif]-->
If you want two backgrounds, then you need two block content elements of full width and height. On the first (the <body>) you set the gradient image as background. On the second (the first <div> element of the <body>) you set the repeated image as background. Only thing you need to make sure is that the repeated image has a transparent background on its own (you can do this with gifs and pngs).
What if you applied the gradient background to the html element, and the repeating image to the body element? Does the repeating image have a transparent background, so the gradient will show through?
I haven't tested this idea, and it may have issues with older versions of IE (which didn't handle transparency very well), but it may be worth investigating.
You could set the background-color of the page/body to the bottom color of the gradient. Make the gradient as high as you need, and only repeat-x, not y. Then when the page gets higher than the gradient background, it just fades to the background color, which continues indefinitely.
So you have 2 different backgrounds? You could merge them together using photoshop or fireworks. Then use the single background in the css repeated as you need.
加载中,请稍侯......
精彩评论