Home Tutorials CSS CSS Background Image Property

CSS Background Image Property

0
CSS background image property

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

CSS Background Image Position

By default, the image Position is at top-left junction of an element and replicated both horizontally as well as vertically. The background image should be chosen according to the text colour. The bad variety of text and background images may cause a poorly designed and not legible webpage.

CSS Background Image Opacity

This property’s url() value allows us to include a file path to any image. It will show the element’s background. We can use multiple images or a combination of gradients and pictures for the background. If the background image is dead to load or if we are using the gradients, but they are not supported on the related browser, then.

We can use the fallback value (the value used as the substitution) as the background color of the element.

background-image: url();  

You might like this:

CSS Background Image

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

CSS Background Image Gradient

<!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>  

NO COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Exit mobile version