CSS Background Image Property Ninja

Saturday 24th, Dec, 2016 | #CSS #CSS2 / CSS3 #Pure CSS


The background-image property defines the background image of an element. The background of an element is the total size of the element, this including padding and border.

We will demonstrate its use through a series of css and css3 examples about.

Syntax: background-image: url|none|initial|inherit;

Example 1: Set Body image Background


body {
  background: url(cssbackgroundimage.jpg);
}

Example 2: Background Position

The CSS background-position property allows you to move a background image around within its container.


body {
  background-image: url(cssbackgroundimage.jpg);
  background-position: 100px 5px; 

}

Example 3: Background Repeat

The background-repeat property defines if (and how) it will repeat. There are four values for this property: repeat-x, repeat-y, no-repeat, repeat


body {
  background-image: url(cssbackgroundimage.jpg);
  background-repeat: repeat-x; 

}

Example 4: Background Size

Specify the size of a background image: Syntax: background-size: auto|length|cover|contain|initial|inherit;


body {
  background-image: url(cssbackgroundimage.jpg);
  background-repeat: repeat-x; 
  background-size: 100% 100%;

}

Example 5: Background Size Cover

Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area


body {
  background-image: url(cssbackgroundimage.jpg);
  background-repeat: repeat-x; 
  background-size: cover;

}

//Responsive Full Page Background Image
html { 
  background: url(cssbackgroundimage.jpg) no-repeat center center fixed; 
  background-size: cover;
}