Multiple Backgrounds In CSS
Last week i got problem of placing multiple backgrounds in CSS. By quick googling i came to know that CSS doesn’t support more than one background image. Although CSS2 support this option and we can just place more then one background by separating each background via commas. Like
-
background-image: url(background.gif), url(background2.gif);
Anyways, my concern is with simple CSS because implementation of CSS2 is far away at this time. Very first and simple solution that came to my mind is to use two divs and put background image in each div and finally adjust hight and width.
Finally i write following tweak, and it is working fine in all browsers.
-
-
body {
-
background-image: url(bg1.gif);
-
margin:0px;
-
font-size:24px;
-
height:100%
-
}
-
-
div.bg2 {
-
background-image: url(bg2.gif);
-
position: absolute;
-
bottom: 0px;
-
height: 50%;
-
width: 100%;
-
}
See demonstration of Multiple Backgrounds In CSS.
Author:
Burhan Khan
Posted in: CSS Tricks |