CSS background-image

The CSS background-image property is used to define image(s) for the background of an element. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      #myd {background-image: url("images/sml-plnt-lf.jpg");
            padding: 20px;}
   </style>
</head>
<body>
   
   <div id="myd">
      <h2>The background-image Property</h2>
      <p>This is an example of <b>background-image</b> property in CSS.</p>
   </div>
   
</body>
</html>

Output

The background-image Property

This is an example of background-image property in CSS.

By Default - The image defined for background-image property, will get placed at top-left corner of specified element. Also the image gets repeated in vertical and horizontal direction both.

The image used in above example is:

CSS background-image Syntax

The syntax of background-image property in CSS, is:

background-image: x;

The value of x should be any of the following:

url("imagePath") - used to define the path/URL of an image for the background
linear-gradient() used to define linear gradient for the background. The color will be placed from top to bottom
radial-gradient() - used to define radial gradient for the background. The color will be placed from center to edges
conic-gradient() - used to define conic gradient for the background. The color transitions tappers from a circular based to a point (around the center)
repeating-linear-gradient() - used to define repeating linear gradient for the background
repeating-radial-gradient() used to define repeating radial gradient for the background
repeating-conic-gradient() - used to define repeating conic gradient for the background
none - used to define no background image to use at all. This is the default value
initial - used to use the default value
inherit - used to use the value inherited by the parent element

CSS background-image Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      #a, #b, #c, #d, #e, #f {color: white; padding: 30px 20px; margin-bottom: 20px;}
      #a {background-image: linear-gradient(to right, red, green, black, purple);}
      #b {background-image: radial-gradient(closest-side, red, green, black, purple);}
      #c {background-image: conic-gradient(red, green, black, purple);}
      #d {background-image: repeating-linear-gradient(90deg, red, green, black, purple 25%)}
      #e {background-image: repeating-radial-gradient(circle, red, green, black, purple 25%)}
      #f {background-image: repeating-conic-gradient(green 10%, black, purple 25%)}
   </style>
</head>
<body>

   <div id="a">
      <h2>background-image: linear-gradient(to right, red, green, black, purple)</h2>
   </div>
   <div id="b">
      <h2>background-image: radial-gradient(closest-side, red, green, black, purple)</h2>
   </div>
   <div id="c">
      <h2>background-image: conic-gradient(red, green, black, purple)</h2>
   </div>
   <div id="d">
      <h2>background-image: repeating-linear-gradient(90deg, red, green, black, purple 25%)</h2>
   </div>
   <div id="e">
      <h2>background-image: repeating-radial-gradient(circle, red, green, black, purple 25%)</h2>
   </div>
   <div id="f">
      <h2>background-image: repeating-conic-gradient(green 10%, black, purple 25%)</h2>
   </div>
   
</body>
</html>

Output

background-image: linear-gradient(to right, red, green, black, purple)

background-image: radial-gradient(closest-side, red, green, black, purple)

background-image: conic-gradient(red, green, black, purple)

background-image: repeating-linear-gradient(90deg, red, green, black, purple 25%)

background-image: repeating-radial-gradient(circle, red, green, black, purple 25%)

background-image: repeating-conic-gradient(green 10%, black, purple 25%)

Include Multiple Background Images to an Element in CSS

Using the background-image property, we can also define multiple background images to an element. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      #mydiv{border: 3px solid crimson; padding: 24px; height: 320px;
         background-image: url("images/sml-plnt-lf.jpg"), url("images/sml-plnt.jpg");
         background-position: right bottom, left top;
         background-repeat: no-repeat, no-repeat;}
   </style>
</head>
<body>
   
   <div id="mydiv">
   </div>
   
</body>
</html>

Output

In above example, the CSS code can also be written in this way:

#mydiv{border: 3px solid crimson; padding: 24px; height: 320px;
   background: url("images/sml-plnt-lf.jpg") right bottom no-repeat,
   url("images/sml-plnt.jpg") left top no-repeat;}

That is, we can use the background property to define all the background properties at once.

Note - We can define any number of background images to an element. Each background image must be separated by comma.

Note - If an element has multiple background images, then images are stacked on the top of each other in a way that the first image will be closest to viewer.

Note - If multiple background images are placed at different-different positions, then all the images may clearly be seen.

CSS Online Test

« Previous Tutorial Next Tutorial »