How to set different background properties in one declaration?
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
Share your thoughts in the comments
Please Login to comment...