Skip to content
Related Articles

Related Articles

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>

Output:

My Personal Notes arrow_drop_up
Recommended Articles
Page :