How to set two background images for an HTML page ?

The other day I was wondering how could I set two background images for an HTML page and I came with one solution.
I don’t know if it’s the best way to do that but it worked as I wanted.

To explain the solution, here is the complete steps I made

First I had an HTML page without any background:

Beach_withoutBackground

Then I added some CSS to set a background image :

bg

body
{
   background:url("img/bg.gif") no-repeat fixed left top #9AE4E8;
}

The result was good :
Beach_OneBackground
But I wanted to add a second background image on the right bottom :
logobeachrahier_medium
So I moved my background declaration for the head part of the html file

html
{
 background:url("img/bg.gif") no-repeat fixed left top #9AE4E8;
}

and I added an other background declaration for the body part

body
{
 background:url("img/logobeachrahier_medium.png") no-repeat fixed right bottom ;
}

The background declared for the body is applied over the html one:

Beach_TwoBackground
I think it’s Pretty good now.

Incoming search terms:

  • html background gifs
  • how to set img in html
  • background gif img
  • background html repeat
  • background page html
  • two background images cover html
  • background-bg
  • bg background gif
  • bg gif
  • how to add multiple background in htmlpage