CSS Background-Image Property

The CSS background-image property is used to set the background image of an element. This can be any HTML element like <div>, <p>, or even the entire body of your webpage.


To use the background-image property, you need to specify it in your CSS style block or inline style attribute. Here’s a basic example:

body {
  background-image: url('your_image.jpg');

In this example, we’ve added a background image to the entire body of our HTML document using the background-image property.


Let’s create a webpage with multiple background images:

div {
  width: 300px;
  height: 200px;
  background-image: url('image1.jpg'), url('image2.jpg');


In this example, we have two images as the background for our div. The first image specified will be on top and subsequent images will be underneath.

Proper Usage

The background-image property can accept multiple values separated by commas. Each value represents an individual background image layer. The first image is closest to the user, with each subsequent image layered behind.

body {
  background-image: url('image1.png'), url('image2.png'), url('image3.png');

Remember, the path to your image can be an absolute URL, a relative URL, or a data URL. Always ensure that the path is correct and accessible for your images to display properly.


Leave a Reply

Your email address will not be published. Required fields are marked *