Menu
Is it possible to have two background images? For instance, I'd like to have one image repeat across the top (repeat-x), and another repeat across the entire page (repeat), where the one across the entire page is behind the one which repeats across the top.
I've found that I can achieve the desired effect for two background images by setting the background of html and body:
html { background: url(images/bg.png); } body { background: url(images/bgtop.png) repeat-x; } Is this "good" CSS? Is there a better method? And what if I wanted three or more background images?
469
The multiple background images for an element can be put in the HTML page using CSS. Use CSS background property to add multiple background images for an element in any pattern and use other CSS property to set the height and width of the images.
You can apply multiple backgrounds to elements. These are layered atop one another with the first background you provide on top and the last background listed in the back. Only the last background can include a background color.
To add background color in HTML, use the CSS background-color property. Set it to the color name or code you want and place it inside a style attribute. Then add this style attribute to an HTML element, like a table, heading, div, or span tag.
CSS3 allows this sort of thing and it looks like this:
body { background-image: url(images/bgtop.png), url(images/bg.png); background-repeat: repeat-x, repeat; } The current versions of all the major browsers now support it, however if you need to support IE8 or below, then the best way you can work around it is to have extra divs:
<body> <div id="bgTopDiv"> content here </div> </body> body{ background-image: url(images/bg.png); } #bgTopDiv{ background-image: url(images/bgTop.png); background-repeat: repeat-x; } The easiest way I have found to use two different background images in one div is with this line of code:
body { background:url(image1.png) repeat-x, url(image2.png) repeat; } Obviously, that does not have to be for only the body of the website, you can use that for any div you want.
Hope that helps! There is a post on my blog that talks about this a little more in depth if anyone needs further instructions or help - http://blog.thelibzter.com/css-tricks-use-two-background-images-for-one-div.
39
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
