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 :
body
{
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
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:
I think it’s Pretty good now.
Application Developer, .NET enthusiast since 2004, I'm interested in technology watch, usability, code quality, patterns & practices.
