Home > CSS Tricks > Multiple Backgrounds In CSS

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

  1. 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.

  1.  
  2. body {
  3. background-image: url(bg1.gif);
  4. margin:0px;
  5. font-size:24px;
  6. height:100%
  7. }
  8.  
  9. div.bg2 {
  10. background-image: url(bg2.gif);
  11. position: absolute;
  12. bottom: 0px;
  13. height: 50%;
  14. width: 100%;
  15. }

See demonstration of Multiple Backgrounds In CSS.

Author:

Burhan Khan

Categories: CSS Tricks Tags: ,
  1. December 5th, 2008 at 05:47 | #1

    i want learn css. can you kelp me

  2. March 29th, 2010 at 20:32 | #2

    good boy

  3. April 6th, 2010 at 21:28 | #3

    i want learn css. can you kelp me

  4. October 3rd, 2010 at 14:14 | #4

    Very nice and sticky information but I am not agree with the title “List of .edu website for FREE backlinks” I think it should be “Way to find .edu website for FREE backlinks”

  5. October 11th, 2010 at 01:42 | #5

    thank you

  6. May 7th, 2011 at 12:59 | #6

    Hey there! I’ve been following this website Tips & Tricks from Burhan Khan » Multiple Backgrounds In CSS for a long time and finally acquired more courage to go forward and give you an hi out via Dallas Tx! I would like to mention maintain the great work! Oh yeah how about Gaddafi wonderful news flash. Enjoy your day Rob Rasner Magic Show

  7. May 25th, 2011 at 21:51 | #7

    If you’re looking for the cheapest type of shoe, you might look into Foot Thongs. Foot Thongs can be found the cheapest in dance attire retail stores and online. Besides their cheap price, they are also very uncomfortable. The stylejordan used is stiff and rugged, and does not fo…

  1. No trackbacks yet.