How to styling a background

div {background-color: green;
background-image: url("/images/bg/sky_bg01.jpg");
background-image: radial-gradient(crimson, skyblue);
background-repeat: repeat-x;
background-position: right top;
background-attachment: scroll; 
background-origin: content-box;
background-size: 200px 200px;

/* shorthand */
background: gray url("/images/test_flower_big.jpg") no-repeat fixed center;

background

The background is shorthand for others properties. Any property can be omitted. The background-size property may only be included immediately after background-position, separated with the / character.

/* full syntax 
background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment
*/div {
background: red url("/images/test_flower_big.jpg") center/80% fixed;

background-repeat

The background-repeat defines how a background image will be repeated. If only one value is specified, this means how to repeat horizontally and vertically. If there are two values, then the first value specifies how to repeat horizontally, and the second vertically. Possible values:

• repeat - repeats the image vertically and horizontally (default value). The last image will be clipped if it does not fit.
• repeat-x - repeats image horizontally
• repeat-y - repeats image vertically
• no-repeat - the image will be shown only once
• space - repeats the image as much as possible without clipping. Free space between the images is distributed evenly.
• round - repeats the image for filling without gaps, image will be squished or stretched if necessary.

div {
background-image: url('/images/car.png'); 
background-repeat: repeat; 
min-height: 150px;
}

div {
background-image: url('/images/car.png'); 
background-repeat: space repeat; 
min-height: 150px;
}

background-origin

The background-origin sets the background's origin. Possible values:

• border-box - the background is positioned relative to the border box
• padding-box - the background is positioned relative to the padding box
• content-box - the background is positioned relative to the content box.

background-clip

The background-clip sets whether an element's background extends underneath its border box, padding box, or content box. Possible values:

• border-box - the background extends behind the border (default value)
• padding-box - the background extends to the inside edge of the border
• content-box - the background extends to the edge of the content box

background-attachment

The background-attachment sets whether a background image's position is fixed within the viewport, or scrolls with its containing block. Possible values:

• scroll - the background image will scroll with the page (default value)
• fixed - the background image will not scroll with the page
• local - the background image will scroll with the element's contents