How to set different background properties in one declaration?

Last Updated : 25 Mar, 2021

We are going to use the Shorthand property in this article to set different background properties.

To reduce the length of the CSS code we can declare background properties in one line through “Shorthand Property”.
Through this property we can define different properties of background in a single line instead of using background-color, background-image and other properties in multiple lines.

Shorthand properties allow you to specify a set of related CSS properties with a single property. They combine related properties into a shorthand form. In most cases, the browser sets a default value if you leave out an optional one

Syntax:

background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

Example 1:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        body { 
            background: skyblue url("image.png") no-repeat center; 
            margin-right: 200px; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>Shorthand Property</h1> 
  
    <p>You can see that background property  
        are given in a single declaration</p> 
  
</body> 
  
</html> 

Output:

Example2: Shorthand property with multiple image

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Shortand property</title> 
    <style> 
        body { 
            background: url(image.png) left no-repeat, 
            url(image2.png) right bottom no-repeat #ffffff; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h1>Shorthand Property</h1> 
        <p>The background property is a shorthand property for 
             specifying all the background properties in one declaration.</p> 
        <p>Here, we took the example of adding multiple  
            background images and aligned text between them </p> 
        <p>As we have used multiple background images, the  
            background-color parameter is moved to the end of the list</p> 
  
    </center> 
</body> 
  
</html>