CSS - background-image



The background-image property of CSS sets one or more background images on an element.

Multiple layers of background images can be stacked on top of each other. The borders are drawn on top of the background color. In case an image cannot be drawn or loaded, the browser handles it as none.

In order to specify more than one background image, you can supply multiple values, separated by comma.

Possible Values

  • none: Specifies that no image is set as background.

  • <image>: URL of the image to be displayed. For multiple backgrounds, pass the urls separated by comma.

Applies to

All the HTML elements.

DOM Syntax

object.style.backgroundImage = "Any value as defined above";

CSS background-image - With url()

Here is an example showing how to set the background image using url() −

<html>
<head>
<style>  
   .background-img {
      background-image: url('images/pink-flower.jpg');
      background-repeat: no-repeat;
      width: 400px;
      height: 400px;
      position: relative;
      border: 5px solid black;
      color: white;
   }
</style>
</head>
<body>
   <div class="background-img">Image</div>
</body>
</html>

CSS background-image - Multiple Images

Here is an example showing how to set multiple images as background, stacked over each other −

<html>
<head>
<style>  
   .multiple-images {
      background-image: url('images/logo.png'), url('images/scenery2.jpg'), url('images/white-flower.jpg');
      background-repeat: no-repeat;
      width: 800px;
      height: 700px;
      position: relative;
      border: 5px solid black;
      color: white;
   }
</style>
</head>
<body>
   <div class="multiple-images"></div>
</body>
</html>

CSS background-image - Using linear-gradient()

Here is an example showing how to set background using an image and a linear gradient:

<html>
<head>
<style>  
   .linear-gradient {
      background-image: linear-gradient(rgba(120, 235, 112, 0.5), rgba(232, 111, 64, 0.5)), url('images/tutimg.png');
      background-repeat: no-repeat;
      background-position: center;
      width: 400px;
      height: 400px;
      position: relative;
      border: 5px solid black;
   }
</style>
</head>
<body>
      <div class="linear-gradient">Background image with linear gradient</div>
</body>
</html>
Advertisements