CSS background-image

The background-image property in CSS is used to set the background image of an element. This property allows you to specify an image that will be used as the background for a specific HTML element. You can use this property to add visual interest to your website by adding images to elements such as divs, sections, or buttons.

The syntax for using the background-image property is as follows:


selector {
  background-image: url('image.jpg');
}

The url() function is used to specify the path to the image that you want to use as the background. You can provide a relative path to the image file or an absolute URL.

Let's take a look at an example to see how the background-image property works:

Result:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

In this example, we have set the background image of a <div> element using the background-image property with the value url('example.jpg'). This will display the image "example.jpg" as the background of the <div> element.

Remember that the background-image property is just one of many background properties that can be used to style elements in CSS. You can also control properties such as background-color, background-repeat, background-position, and background-size to further customize how the background image is displayed.

Related CSS topics