CSS Background Shorthand

web development

Friday 2 April 2021

Hacker

web development

CSS Background Shorthand

In CSS For shorten the code, it is also possible to specify all the background properties in one single property. That is called a shorthand property.

CSS Background Shorthand

Example Instead of writing the CSS background property :

body {
background-color: #f7f7f7;
background-image: url("rahasyacommunity.png");
background-repeat: no-repeat;
background-position: left top;
}

Try it Yourself »

If we can use the shorthand property background in CSS:

Example

Here we Use the shorthand property to set the background properties in one declaration:

body {
background: #ffffff url("img_tree.png") no-repeat right top;
}

Try it Yourself »

When we use the shorthand property in CSS the order of the property values is:

background-color

background-image

background-repeat

background-attachment

background-position

In the CSS Background Shorthand It does not matter if one of the background property values is missing, as long as the other ones are in this order.

Note : we do not use the background-attachment property in the examples above, as it does not have a value.

Let's see Full Example of CSS Background Shorthand

Example

<html>

<head>

<title>CSS Background Shorthand </title>

<style>

body {

background: #ffffff url("img_tree.png") no-repeat right top;

}

</style>

</head>

<body>

<h1>CSS Background Shorthand</h1>

</body>

</html>

Try it Yourself »

All CSS Background Properties

Here You can see All CSS Background Properties in the table. For All CSS Background Properties With Detail Click on Property name's.

Property	Description
background	Sets all of the background properties in one declaration
background-attachment	It Sets anyway a background image is fixed or scrolls with the rest of the page
background-clip	background-clip Specifies the painting area of the background
background-color	Sets the background color of an element
background-image	It Set the background image for an element
background-origin	Specifies where the background image(s) is/are positioned
background-position	It specify the starting position of a background image
background-repeat	Sets how a background image will be repeated
background-size	This is Specify the size of the background image.