You cannot add more than one background image to your Web page. It is possible to give the effect of multiple background images by applying a background to elements that are nested, such as the <html> tag and the <body> tag. This effect is achieved with the next CSS test file:

File test.css

html {

background-image: url(BMWLogo.gif);

background-repeat: repeat-y;

background-position: 2px 2px;

background-attachment: fixed;

background-color: #6E6E6E;

color: #FAFAFA;

}

body {

background-image: url(2013-BMW-X6-M.jpg);

background-repeat: no-repeat;

background-position: center center;

padding-left: 100px;

}

ul {

list-style-type: disk;

}

You can use for example the next test file:

 

File test.html

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”

“https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<html xmlns=”https://www.w3.org/1999/xhtml” lang=”en-US”>

<head>

<title>How to add more than one background image to Web page with CSS</title>

<meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />

<link rel=”stylesheet” type=”text/css” href=”test.css” />

</head>

<body>

<p>

<h1>2013 BMW X6 Specifications</h1>

<h2>X6 Engine Performance & Fuel Economy</h2>

<ul>

<li>Turbocharged</li>

<li>Engine: 3.0L in-line six-cylinder DOHC Double-VANOS with variable valve timing</li>

<li>Premium unleaded fuel</li>

<li>Fuel economy: EPA (08):, 16 MPG city, 23 MPG highway, 19 MPG combined and 426 mi. range</li>

<li>Gasoline direct fuel injection</li>

<li>22.4gallon fuel tank</li>

<li>Power (SAE): 300 hp @ 5,800 rpm; 300 ft lb of torque @ 1,300 rpm</li>

</ul>

<h2>X6 Handling, Brakes, & Suspension</h2>

<ul>

<li>ABS</li>

<li>3.154:1 axle ratio</li>

<li>Brake assist system</li>

<li>Cornering brake control</li>

<li>Four-wheel disc brakes including 4-ventilated</li>

<li>Electronic brake distribution</li>

<li>Electronic hand brake</li>

<li>Electronic traction control (via ABS & engine management)</li>

<li>Immobilizer</li>

<li>Dynamic Stability Control (DSC) stability control</li>

<li>Independent front wishbone suspension with stabilizer bar and coil springs, independent rear multi-link suspension with stabilizer bar and coil springs</li>

</ul>

</p>

</body>

</html>

The next picture shows the result:

Adding more than one background image to Web page with CSS

Adding more than one background image to Web page with CSS