.png)
Multiple Backgrounds Using CSS
Perhaps at some point you wanted to use more than one background using an HTML element for example, to put a picture at top and another post on the bottom of a page.The most recurrent way is to create two or more containers and put in each a background;However it is not necessary because we can use two or more different images in one container using the same property background we used already. it is not a big deal. First we should use the property
background-image and than add URLs of images, separated by a comma.
For example, if we add two images at the bottom of a blog it would like something like this:
body {
background-image: url(URL of Image), url(URL of Image);
}
And to change its position use background-position , likewise establish ownership for the first image, then put a comma, and then put the other position.
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 {If you also want to add a background color we can do it using background-color .
background-image: url(URL of Image), url(URL of Image);
background-position: left top, right bottom;
background-repeat: no-repeat, no-repeat;
}
body {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.
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;
}
This is the full code I used for the previous example.
CSS
#doublebackground {
background-color: #f2f2f2;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJr8yhW01OovHFQTskS1NVC5yl3RZJS4jBnv0eKuyDG4fa7oL4vnJO6T7QbmyPr7cvO7m3V_P_aiGYtUHJPHMNPRAeuUgLI2_JCiu5XQ7Wzlmg8rBpFogeEthlSnMZrCNbgSC35z5Ri9gN/s450/fondo1.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXzll5iyptLmbt52cmKlmn49b2pj-YJ2FjEhECogyrJCtul7r2CRKJvFw1E5ACwCiulMB56ny6dyXIyJj9G8dKX3pZVK_JcVVw2H6DTLwECJd8nzfg5B2YK8Wsr-4PKxSxaCykkAM6C5f4/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.
CSS
#doublebackground {HTML
background-color: #C5E0DC;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4C8OfsAwFQVz1-XIGlrpYF61JIBZnWfBzDwRyytItVtv2qN-fnJhJDRia0klOLFscSLJSBmsO71B3xuWYQfh64WiW6qu-gso6aDly5lnr9jxvT5xwe2cE3xBXOSMzYcywo5yZtcvrArKo/s116/fondo1.jpg), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmfzQWz14pTY8PX-D2qDBD6YeQhNic_E5CWl3aqP_1uZjcRTRAFK9sgy3s1QyuuBEdRiheKEYYif1vZAV6bYTBf9EHQo1Rxw9CQpviWZ7CqIT29FkkqV_sJ0hYh4LYmdCpdcIf7SFd30NY/s116/fondo2.jpg), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv7o6m2NAMWIjDy2SifTuizHsXspbXUh2hGtwlu2XwiWV9SCoddJ8P9irmRNcPPoh0Fua3U9ovKJwZoptG0p4rp1oK3kWPldlYRCWBFtPOCghJw0P9xdqd1oNAa5qxzimCXhA7WH5nkmFl/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;
}
<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.
0 comments: