How to Have Multiple Background Images Using Css

Can I have multiple background images using CSS?

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:

<div id="bgTopDiv">
content here
background-image: url(images/bg.png);
background-image: url(images/bgTop.png);
background-repeat: repeat-x;

Change background on element with multiple background images

Using multiple background images on a single element, unfortunately, there's no way using pure CSS to set the second background image in a separate rule without repeating all the previous background layers.

jQuery to the rescue.

jsFiddle demo in action

Inside your CSS set the second background to none:


background: linear-gradient(
rgba(0, 0, 0, 0.0),
rgba(0, 0, 0, 0.6)
), none 50% / cover; /* notice the `none` for the second layer */

width: 100%;
padding-bottom: 37.01%;
position: relative;
float: left;

while creating your elements, make sure to generate them passing the desired image URL from whatever data you use, >> inside a data-* attribute of your generated element:

<div class="banner_button" data-bg="../images/whatever.jpg"></div>

Than using jQuery, replace that none value with the value holded by the data-bg attribute:

$(".banner_button").css("backgroundImage", function(i, v){
return v.replace("none", "url("+ $(this).data("bg") +")" );

That's it.

jQuery will rebuild the whole background layers for you!

positioning multiple background images

Try this

.img_home{    background-repeat: no-repeat;    height: 1000px;    background: url( 25px top no-repeat,url( no-repeat;}
<div class="img_home"></div>

Visibility of multiple background images

You cant do visible:hidden that on multiple backgrounds you can hide the whole div. One hack I did was to use the background size to get to it

/*CSS */
.app1 {
background-image: url(../img/photo1.png),

$('.app1').css({'background-size':'0 0, 27em'});//to hide photo1.png
$('.app1').css({'background-size':'17em, 0 0'});//to hide photo2.png

This is the way to do it till we have some more background specs coming up ;)

Javascript add multiple background images using HTML DOM or Jquery

You can use the background-image CSS property, which can be given multiple images. The first background specified will be on the top and the last one will be on the bottom.

document.querySelector("button").addEventListener("click", function(e){
document.querySelector("table").style.backgroundImage += ",url(";
}, {once: true});
<table style="height: 100px; width: 100px; border: 1px solid black; background-image: url(;">
Add Image

Multiple background images positioning

Your problem is that the repeat-y is going to fill the whole height, no matter where you position it initially. Thus, it overlaps your top and bottom.

One solution is to push the repeating background into a pseudo element positioned off of the container by the 12px at the top and bottom. The result can be seen here (the opacity in the demo is just to show that there is no overlap going on). Without opacity, see here. The relevant code (tested in CSS3 browsers: IE9, FF, Chrome):


div {
position: relative;
z-index: 2;
background: url(top.png) top left no-repeat,
url(bottom.png) bottom left no-repeat;

div:before {
content: '';
position: absolute;
z-index: -1; /* push it to the background */
top: 12px; /* position it off the top background */
right: 0;
bottom: 12px; /* position it off the bottom background */
left: 0;
background: url(middle.png) top left repeat-y;

If you needed or wanted IE8 support (which does not support multiple backgrounds), then you could put the top background in the main div, and put the bottom background in by using the div:after pseudo element positioned to the bottom of the container.

Related Topics

Leave a reply