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 property:

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>