Open In App

How to set different background properties in one declaration?

Improve
Improve
Like Article
Like
Save
Share
Report

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>


Output:



Last Updated : 25 Mar, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads