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