CSS Background Properties
Mostly 8 attributes for the background images.
The CSS3 background properties are supported by modern browsers, but some values are not.
This article is all about the existing and future attributes.Lets you know how to implementing backgrounds with bugs free.
- background-attachment
- background-color
- background-image
- background-position
- background-position-x (not in the specifications)
- background-position-y (not in the specifications)
- background-repeat
- background-clip
- background-origin
- background-size
- background-inline-policy – (not in the specifications)
- shorthand: background, which includes the above attributes that are in the specifications.
background-attachment
The background adjustment property sets whether a background image is corrected or scrolled with the rest of the page.
Example:
body { background-image: url('bodyBG.gif'); background-repeat: no-repeat; background-attachment: fixed; } |
background-color
The background-color property sets the background color of an element.
The background of an element is the overall size of the element, including padding and boundary (but not the edge).
Note: Use a background color and a text color that makes the text easy to read.
Property Values for background-color :
background-color: transparent | rgb(255, 255, 255) / rgb(r%, g%, b%) | rgba(255, 255, 255, 1) / rgba(r%, g%, b%, 1) | #fff | #123456 | magenta;
DOM :
document.getElementById("myID").style.backgroundColor |
Example :
body { background-color: yellow; } h1 { background-color: #00ff00; } p { background-color: rgb(255,0,255); } |
background-image
The background-image property sets one or additional background pictures for part.
The background of component|a component|part|a part} is that the total size of the element, as well as artifact and border (but not the margin).
By default, a background-image is placed at the top-left corner of a part, and perennial each vertically and horizontally.
Tip: forever set a background-color to be used if the image is untouchable.
Property Values for background-image
background-image: inherit | none | url(relative to CSS) | [gradients];
background-image: url(relative to css), url(second image); // CSS3 allows for multiple background images.
DOM :
document.getElementById("myID").style.backgroundImage |
Example :
body { background-image: url("img_tree.png"), url("img_flwr.png"); background-color: #eecccc; } |
background-position
The background-position property sets the beginning position of a background image.
Tip: By default, a background-image is placed at the top-left corner of the part, and perennial each vertically and horizontally.
Property Values for background-position
background-position: bottom | center | inherit | left | right | top | 10px 10px | 50% 50%;
background-position: 0 0, 50% 50%, 100% 100%; /* multiple placements */
DOM :
document.getElementById("myID").style.backgroundPosition |
Example :
body { background-image: url('smile.gif'); background-repeat: no-repeat; background-attachment: fixed; background-position: center; } |
Background-position-x
Property Values for background-position-x
background-position-x: center | inherit | left | right | px/em | %;
DOM :
document.getElementById("myID").style.backgroundPositionX |
background-position-y
Property Values for background-position-y
background-position: bottom | center | inherit | top | 10px | 2em | 50%;
DOM :
document.getElementById("myID").style.backgroundPositionY |
Background-repeat
The background-repeat property sets if/how a background image are going to be recurrent.
By default, a background-image is recurrent each vertically and horizontally.
Tip: The background image is placed in step with the background-position property. If no background-position is specific, the image is often placed at the element’s high left corner.
Property Values for background-repeat
background-repeat: inherit | no-repeat | repeat | repeat-x | repeat-y;
DOM :
document.getElementById("myID").style.backgroundRepeat |
Example:
body { background-image: url("bg.gif"); background-repeat: repeat-y; } |
background-clip
The background-clip property specifies the painting space of the background.
Property Values for background-clip
background-clip: [border-box | padding-box ] [ , [border-box | padding-box ] ]* ;
-moz-background-clip: border;
-webkit-background-clip: border-box;
DOM :
document.getElementById("myID").style.backgroundClip |
Example:
div { border: 10px dotted black; padding:35px; background: yellow; background-clip: content-box; } |
background-origin
The background-origin property specifies wherever the background image is positioned.
Note: If the background-attachment property is about to “fixed”, this property has no impact.
Property Values for background-origin
background-origin: [border-box | padding-box | content-box ] [ , [border-box | padding-box | content-box] ]* ;
-moz-background-origin: border; /* does not yet support multiple images, so no support for multiple values */
-webkit-background-origin: border-box, padding-box, border-box;
DOM :
document.getElementById("myID").style.backgroundOrigin |
Example:
#example1 { background:url(img_flwr.gif); background-repeat: no-repeat; padding:35px; background-origin: content-box; } |
background-size
The background-size property specifies the dimensions of the background pictures.
DOM :
document.getElementById("myID").style.backgroundSize |
Example:
div { background: url(flwr_img.gif); background-size: 20px 40px; background-repeat: no-repeat; } |
background shorthand
The background shorthand (or shortcut) attribute allows the declaration of all 5 background attributes in one statement. Before CSS3, the values may well be in any order, however, were typically within the color, image, attachment, position and repeat order. If Associate in Nursing attribute price isn’t such as, {the price|the worth} gets reset to the default value, that is why I like to recommend against victimization the shorthand.
Property Values and order for the background shorthand
background: background-image | background-position / background-size | background-repeat | background-attachment | backgroun-origin | background-clip | background-color
background: url(myImg.jpg) bottom 20px right 20px / 200px 100px no-repeat fixed red;
background: url(myImg.gif) 0 0 / 200px 100px no-repeat fixed border-box padding-box blue; /*in action*/
DOM :
document.getElementById("myID").style.background |