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