Title: CSS: Multiple Background Images? Last modified: August 18, 2016 --- # CSS: Multiple Background Images? * [pvicnan](https://wordpress.org/support/users/pvicnan/) * (@pvicnan) * [22 years ago](https://wordpress.org/support/topic/css-multiple-background-images/) * A CSS question here; Is it possible to have multiple background images? If so, how? For example, 1 image diplayed at the top-right, another at the bottom-right, and the last repeated along the y-axis at the right. Thank you! ^.^ Viewing 8 replies - 1 through 8 (of 8 total) * Anonymous * [22 years ago](https://wordpress.org/support/topic/css-multiple-background-images/#post-60018) * i can think of how to do two. try declaring an id or class on the body tag ie` ` or `` and in your css: `body.(name) pr body#( name) { background:url(...) no-repeat top right; } etc, in addition to your regular body { background… } – i havent tried this, so im not sure if it will work entirely. hope that helps. (be sure to check the documentary on those tags) 😉 * [ihad](https://wordpress.org/support/users/ihad/) * (@ihad) * [22 years ago](https://wordpress.org/support/topic/css-multiple-background-images/#post-60019) * are you looking for this maybe? [http://www.alistapart.com/articles/onionskin/](http://www.alistapart.com/articles/onionskin/) * Thread Starter [pvicnan](https://wordpress.org/support/users/pvicnan/) * (@pvicnan) * [22 years ago](https://wordpress.org/support/topic/css-multiple-background-images/#post-60020) * Hmm.. so, if I were trying to implement this on the Post div, I should encapsulate THAT in another div? I’ll give it a spin! * [lane](https://wordpress.org/support/users/lane/) * (@lane) * [22 years ago](https://wordpress.org/support/topic/css-multiple-background-images/#post-60021) * No, you can’t have multiple background images. Use the top-right image in the header, bottom-right in the footer, and the last repeating one in the background like: ‘background: url(yourImage.jpg) repeat-y;’ Just make the background image wide (ie 1600×50) and place the pattern/image that you want to repeat where you want it to appear. * [peoii](https://wordpress.org/support/users/peoii/) * (@peoii) * [22 years ago](https://wordpress.org/support/topic/css-multiple-background-images/#post-60022) * I’d recommend simply using multiple div layers, so something like the following: ` body { background: url(images/top_left.png) top left no-repeat; } div.topbotright{ background: url(images/botright.png) bottom right no-repeat; } div.repeater { background: url(images/repeater.png) repeat-y; } Then in your markup, simply add the div’s, in that order, wrapping all of your code (with of course, adding paddings and margins of 0 on all of that), and you should be ready to go. I wouldn’t try for anything where you could declare both all of them in the same tag, because that would surely lower your browser compatibility. * Thread Starter [pvicnan](https://wordpress.org/support/users/pvicnan/) * (@pvicnan) * [22 years ago](https://wordpress.org/support/topic/css-multiple-background-images/#post-60026) * I got it! Thank you! I hadn’t realised that that onion-skinning technique could be applied! *’.’* * Thread Starter [pvicnan](https://wordpress.org/support/users/pvicnan/) * (@pvicnan) * [22 years ago](https://wordpress.org/support/topic/css-multiple-background-images/#post-60217) * I hadn’t realised that the effect is screwed on the IE, and MSN Explorer; I’d leave it at that, but majority of my viewers use these browsers. Any way for a work-around? Thank you! [The site](http://www.vicnan.com) * [Tek](https://wordpress.org/support/users/tek/) * (@tek) * [22 years ago](https://wordpress.org/support/topic/css-multiple-background-images/#post-60280) * That looks VERY classy. Me likes! =) Viewing 8 replies - 1 through 8 (of 8 total) The topic ‘CSS: Multiple Background Images?’ is closed to new replies. * 8 replies * 6 participants * Last reply from: [Tek](https://wordpress.org/support/users/tek/) * Last activity: [22 years ago](https://wordpress.org/support/topic/css-multiple-background-images/#post-60280) * Status: not resolved ## Topics ### Topics with no replies ### Non-support topics ### Resolved topics ### Unresolved topics ### All topics