Multiple Backgrounds Using CSS

10/23/2014 CSS , Tutorials 0 Comments

body {
background-image: url(URL of Image), url(URL of Image);
}

body {
background-image: url(URL of Image), url(URL of Image);
background-position: left top, right bottom;
}

 Here we have the first image that will fit on the upper left side, and the second in the lower right.
, we can also specify whether or not the images are repeated.

body {
background-image: url(URL of Image), url(URL of Image);
background-position: left top, right bottom;
background-repeat: no-repeat, no-repeat;
}

 If you also want to add a background color we can do it using background-color .

body {
background-color: #ccc;
background-image: url(URL of Image), url(URL of Image);
background-position: left top, right bottom;
background-repeat: no-repeat, no-repeat;
}

 You can see an example of the DIV is then like a single image but the reality is that we use a background color, then a picture up, and another image below.



This is the full code I used for the previous example.

CSS

#doublebackground {
background-color: #f2f2f2;
background-image: url(https://lh4.googleusercontent.com/-P-uKwe2FDGU/VDnHT21jkoI/AAAAAAAALkI/i3gzlB0Z5Hg/s450/fondo1.png), url(https://lh6.googleusercontent.com/-7cX2R1ojPR8/VDnLWzxlAMI/AAAAAAAALkY/FYC-_SP-P-w/s450/fondo2.png);
background-repeat: no-repeat, no-repeat;
background-position: left top, right bottom;
width: 450px;
height: 390px;
position: relative;
margin: 0 auto;
}
#doublebackground h2 {
position: absolute;
top:40%;
left: 20%;
color: #fc5669;
}

HTML

<div id="doublebackground">
<h2>Multiple Backgrounds Using CSS</h2>
</div>

But the number of images is not a limited since we can use three or more and give each a different property. As in the following example DIV, add three images of background, each has a different position, and the third will be repeated horizontally.



This is the complete code.

CSS

#doublebackground {
background-color: #C5E0DC;
background-image: url(https://lh6.googleusercontent.com/-qr82X3dc3Kw/VDrX1eJ-haI/AAAAAAAALk4/sQXZl3tB0R0/s116/fondo1.jpg), url(https://lh6.googleusercontent.com/-ldf6AG6_UkU/VDrX1XV6-yI/AAAAAAAALk0/0qQoXoEQT2I/s116/fondo2.jpg), url(https://lh3.googleusercontent.com/-uV3D22K2WHw/VDrX1SdnIII/AAAAAAAALks/OevEuSmNGUk/s116/fondo3.jpg);
background-repeat: no-repeat, no-repeat, repeat-x;
background-position: right top, center center, left bottom;
width: 349px;
height: 300px;
position: relative;
margin: 0 auto;
}

HTML

<div id="doublebackground">
</div>

As you can see, adding more than one background image to the blog template a very simple thing. Always remember to separate them with a comma and images properties, except the last, that does not carry comma, only semicolon. For Internet Explorer it works for version 9 onwards so almost everyone will see it correctly working.

Thanks Everyone
DoNe.