How to add more than one background image to Web page with CSS

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”

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

<html xmlns=”http://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