background-image

Sets the background image for an element or gradient to the background of an element.
There can be several background images, they can be superimposed on each other to achieve the desired effect.
Default value: background-image: none;

Syntax



background-image: url(link to img) | none | inherit;

 /* or */
 
background: url(link to img); 

Please note: there should not be a space after the url.



/* uncorrect */
background-image: url (link to img)

/* correct */
background-image: url(link to img)


url - The value is the path to the graphic file, which is specified inside the url() construct. In this case, the path to the file can be written both in quotes (double or single), and without them.

none - Cancels the background image for an element.

inherit - Inherits the value of the parent.

Examples

Create a background image


	  
	<div class="background-img"> </div>


	
		
	
.background-img {
    background: url(https://cssdon.com/img/back-img.jpg) no-repeat center/cover;
    position: relative;
    overflow: hidden;
    height: 300px; /*set a certain height*/
  
  }
	
	
	  
	

Let's add a second background to the first background.


	  
	<div class="background-img-two"> </div>

	
		
	
.background-img-two {
background: url(https://cssdon.com/img/exbg.png) no-repeat left, url(https://cssdon.com/img/back-img.jpg) no-repeat center/cover;
position: relative;
overflow: hidden;
height: 300px; 


}
	
	  
	

Pay attention to the order of the layers. The first image is superimposed on the second. If you do the opposite, the background of the second image will hide the first image.
The background of the first image is transparent.

Let's add to what we have text.


	  
	<div class="background-img-three">
	<div class="txt">
	<h1>Hello</h1>
	</div>
	</div>


	
		
	
.background-img-three {
background: url(https://cssdon.com/img/exbg.png) no-repeat left, url(https://cssdon.com/img/back-img.jpg) no-repeat center/cover;
position: relative;
overflow: hidden;
height: 300px; 
  

}

.txt {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
	
	  
	

Hello

There is no limit to the number of background images you can set, and you can do cool things like animate background images.