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