CSS3 Tutorial: multiple backgrounds

Multiple backgrounds

background-image

Syntax: <bg-image>#
//For example:
background-image: none 
background-image: url(http://www.example.com/images/bck.png)  
background-image: inherit
//Multple backgrounds
//For example:
background-image: 
      url(../path/to/image1.jpg),
      url(../path/to/image2.jpg);
      background-position: bottom left, top left;
      background-repeat: no-repeat;

Example 1: Multiple backgrounds. See Image 1

The HTML code

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/> <title>Hallo mijn eerste HTML5 pagina!</title> <link href="css/articles_styles.css" rel="stylesheet" type="text/css" media="screen"> </head> <body> <div id="containerplate" > <div id="singleBackgroundImage" class="leftplate"> <div id="multipleBackgroundImages"> <h3>Multiple backgrounds </h3> <p>What we are dealing with here are 2 layers. One container layer which has one background: a steel plate. <br>Inside the container layer there is a second layer, filled with text, which has a background, a screw, placed in 4 positions: bottom left, top left, bottom right, top right </p> </div> </div> <div id="singleBackgroundImage" class="rightplate"> <div id="multipleBackgroundImages"> <h3>Multiple backgrounds </h3> <p>The same layers als left, but now there is a shorter text. </p> </div> </div> <div> </body> </html>

The CSS

/* Meerdere achtergronden */ 
#containerplate{
  width:850px; 
}

.leftplate{
  float:left;
  width:400px;
}

.rightplate{
  float:right;
  width:400px;
}
  
#singleBackgroundImage{
  background-image: 
  url(images/backgrounds_steel_plate.jpg);
  background-position: top left;
  background-repeat: no-repeat; 
}

#multipleBackgroundImages {
  background-image: 
  url(images/backgrounds_screw.png),
  url(images/backgrounds_screw.png),
  url(images/backgrounds_screw.png),
  url(images/backgrounds_screw.png);
  background-position: bottom left, top left, bottom right, top right;
  background-repeat: no-repeat;
  padding:50px;
  margin:0;
}

#multipleBackgroundImages p {
  color:#666;
  text-align:left;
  line-height:18px;
  font-size:1em;
}

/* Fix for IE clearType */
#multipleBackgroundImages p {
  position: relative;
}
multiple backgrounds
Image 1. Multiple backgrounds.

Check this example in your browser

Leave a comment