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:

C# 8.0 and .NET Core 3.0 – Modern Cross-Platform Development: Build applications with C#, .NET Core, Entity Framework Core, ASP.NET Core, and ML.NET using Visual Studio Code, 4th Edition
ASP.NET Core 3 and Angular 9: Full stack web development with .NET Core 3.1 and Angular 9, 3rd Edition
C# in Depth, 4th Edition

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”


<html xmlns=”” lang=”en-US”>


<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” />




<h1>2013 BMW X6 Specifications</h1>

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



<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>


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



<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>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>





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