Background

Background Color

The background-color property property is used to set up the background color of the box.

The possible values for css color specifications are:

ValuesDescription
named colorblue
rgb/ hslrgb(100, 200, 0)
hexadecimal#00ff00
transparentdefault
Background Image

The background-image property is used to set the background image of the box.

The possible values are URIs that points to the valid image (gif, jpeg, png)

url('image.gif') 
url('http://www.quotefellas.com/quote.jpg')
Background Position

The background-position property is used specify the top and the left of the background image relative to the top and the left of the element box.

The possible values are.

PropertiesDescription
<percentage>
<length>
left | center | rightfor horizontal direction
top | center | bottomfor vertical direction
For example
background-position : 30px 50px    /* first value applies to horizontal direction,   
second value apply to vertical direction*/ 
background-position : left bottom 
background-position : 10%    /* applies to both the vertical and horizontal direction.*/ 
background position x

The background-position-x is similar to background-position. It applies to horizontal direction in internet explorer only.

background position y

The background-position-y is similar to background-position. It applies to vertical direction in internet explorer only.

background-repeat

The background-repeat property allows to specify how the background image is repeated.

The possible values are.

PropertiesDescription
no-repeatonly one instance of image will be rendered.
repeatthe image is rendered in both horizontally and vertically.
repeat-xthe image is repeated only horizontally.
repeat-ythe image is repeated only vertically.
Background Attachment

The background-attachment property is used to specify whether or not the background image scrolls with the document.

The possible values are.

PropertiesDescription
fixedthe image is fixed relative to the view-port
scrollthe image is fixed relative to the document, and the two will be scrolled together (the default value)
background

The background property is a shortcut that can be used to set the background-image properties.

syntax
background: <background-attachment> <background_color> <background_image> <background_position> <backgound_repeat>

Both the background-color and background-image can be rendered simultaneously.

Related Tutorial
Follow Us
https://www.facebook.com/Rookie-Nerd-638990322793530 https://twitter.com/RookieNerdTutor https://plus.google.com/b/117136517396468545840 #
Contents