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:


Then I added some CSS to set a background image :


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

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

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

and I added an other background declaration for the body part

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

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

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

About Sam Beauvois

Application Developer, .NET enthusiast since 2004, I'm interested in technology watch, usability, code quality, patterns & practices, UX, ...

1 comment

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>