CSS - background
The background property of CSS is used to set the background of an element. It can be used to apply a single background image or multiple background images, as well as defining the background color, size, position, repeat behavior, and other related properties.
It is a versatile tool for styling the appearance of elements and adding visual interest to web pages. It is a shorthand property for follwoing properties:
The background-attachment: Specifies the position of the background relative to the viewport, either fixed or scrollable.
The background-clip: Controls how far a background image extends beyond the element's padding or content box.
The background-color: Sets the background color of an element.
The background-image: Sets one or more background image(s) on an element.
The background-origin: Sets the origin of the background.
The background-position: Sets the initial position of each image in a background.
The background-repeat: Controls the repetition of an image in the background.
The background-size: Controls the size of the background image.
Possible Values
Following are the possible values that the background shorthand property can have:
<attachment>: Specifies the position of the background, whether fixed or scrollable. Default is scroll.
<box>: Default is border-box and padding-box respectively.
<background-color>: Sets the color of the background. Default is transparent.
<bg-image>: Sets the one or more background image. Default is none.
<position>: Sets the initial position of the background. Default is 0% 0%.
<repeat-style>: Controls the repetition of the image in background. Default is repeat.
<bg-size>: Controls the size of the background image. Default is auto.
Applies to
All the HTML elements.
DOM Syntax
object.style.background = "Value according to the used property";
CSS background - With Image and Background Color
Here is an example of setting a background using the shorthand property background, where an image and background color is specified:
<html> <head> <style> body { background: url('images/scenery2.jpg') center/40% 50% no-repeat fixed padding-box content-box lightblue; } </style> </head> <body> <h2>Shorthand Background</h2> </body> </html>
CSS background - With Repeat Image
Here is an example of setting a background using the shorthand property background, where image is repeated:
<html> <head> <style> body { background: url('images/scenery2.jpg') repeat fixed padding-box content-box lightblue; } </style> </head> <body> <h2 style="color: white;">Shorthand Background - background repeated</h2> </body> </html>
CSS background - With Two Image
Here is an example of setting a background using the shorthand property background, where two images are added and a background color:
<html> <head> <style> body { background: url('images/orange-flower.jpg') right bottom/30% 60% no-repeat, url('images/pink-flower.jpg') left top/30% 60% no-repeat lightgoldenrodyellow; } </style> </head> <body> <h2 style="color: black; text-align: center;">Shorthand Background - two images</h2> </body> </html>
To Continue Learning Please Login
Login with Google