How to add background image in CSS?

The background-image property in CSS is used to set an image as the background of an element. Using this CSS property, we can set one or more than one background image for an element.

By default, the image is positioned at the top-left corner of an element and repeated both horizontally as well as vertically. The background image should be chosen according to the text color. The bad combination of text and background image may be a cause of poorly designed and not readable webpage.

The url() value of this property allows us to include a file path to any image. It will show the element's background. We can use multiple images or a mixture of gradients and images for the background. If the background-image is failed to load or if we are using the gradients, but they are not supported on the corresponding browser then, we can use the fallback value (the value used as the substitution) as the background color of the element.

Syntax

Values

url(): It is the URL to the image. We can separate the URLs by a comma if we want to specify more than one image.

Example

<!DOCTYPE html>  
<html>  
<head>  
<style>  
body {  
  background-image: url("cat.png");
  background-color: lightgray;
  }
</style>  
</head>  
<body>  
</body>  
</html>

Test it Now

Output

Example

<!DOCTYPE html>  
<html>  
<head>  
<style>  
body {  
  height: 200px;
  background-color: #cccccc;
  background-image: radial-gradient(red, green, yellow); }
</style>  
</head>  
<body>  
</body>  
</html>

Test it Now

Output

Example

<!DOCTYPE html>  
<html>  
<head>  
<style>  
body {  
  height: 200px;
  background-color: #cccccc;
background-image: linear-gradient(rgba(0, 0, 255, 0.5),rgba(255, 255, 0, 0.5)), url("lion.png");
}
</style>  
</head>  
<body>  
</body>  
</html>

Test it Now

Output