19/07/2016

CSS Background

In CSS, there are different background properties which can be used to define the background effects of any HTML element. The various background effects are - 

Background Color

To apply a color in the background of any HTML Element, In CSS there is property "background-color".

h1
{
 background-color: #336699;
}

The above example will change the background color of the h1 element with the "#336699" color.

In CSS the color code can be specified by the following ways:
  • By HEX value - like "#336699"
  • By RGB value - like "rgb( 255, 0, 0 )"
  • By color name - like "blue"

Background Image

To apply an image in the background of any HTML Element, In CSS there is property "background-image".

The image will cover the entire element because the by default behaviour of the "background-image" property is repeated.

body 
{
 background-image: url( "example.jpg" );
}
background-image property supports all the major types of image (like .jpg, .png, .gif, .bmp etc)

Background Repeat

CSS "background-repeat" property oftenly used with the "background-image" property. The by default behaviour of the "background-image" property is repeated.

So it will repeats an image both horizontally and vertically. CSS "background-repeat" property allows to set the values like repeat, no-repeat, repeat horizontally only etc.

body 
{
 background-image: url( "example.jpg" );
 background-repeat: repeat-x;
}

In the above example, the image will repeated horizontally only.

Other possible values of "background-repeat" property are given below
ValueDescription
repeatSpecify the repetition both vertically and horizontally.
repeat-xSpecify the repetition only horizontally
repeat-ySpecify the repetition only vertically
no-repeatThe background-image will not be repeated
initialSets this property to its default value.
inheritInherits this property from its parent element.

Background Attachment

The background-attachment property is used to specify if the background image is fixed or scroll with the rest of the page in browser window. Means that if any background image is set as fixed with the "background-attachment" property then the image will not move during scrolling in the browser. 

body 
{
 background: url( "example.jpg" );  
 background-repeat: no-repeat;  
 background-attachment: fixed;
}
The possible values of "background-attachment" property are given below:
ValueDescription
scrollThe background scrolls along with the element. This is default
fixedThe background is fixed with regard to the viewport
localThe background scrolls along with the element's contents
initialSets this property to its default value. Read about initial
inheritInherits this property from its parent element. Read about inherit

Background Position

The "background-position" property allows to set the position of the image or color used in the background of any HTML element.

body 
{
 background-image: url( "example.jpg" );
 background-repeat: no-repeat;
 background-position: right top;
}
The possible values of "background-position" property are given below:
ValueDescription
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
If you only specify one keyword, the other value will be "center"
x% y%The first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%. Default value is: 0% 0%
xpos yposThe first value is the horizontal position and the second value is the vertical. The top left corner is 0 0. Units can be pixels (0px 0px) or any other CSS units. If you only specify one value, the other value will be 50%. You can mix % and positions
initialSets this property to its default value.
inheritInherits this property from its parent element.

Background - Shorthand property

To shorten the code while using the CSS background properties, it is also possible to specify all the background properties in one single property. 

body 
{
 background: #336699 url( "example.jpg" ) no-repeat right top;
}