Background

The background properties is used to create a visually attractive web page. CSS provide properties is used to set background image,color, position, etc.

Background Color

 The background-color property is used to set background color of an elements.

background-color
Syntax:
background-color: value;
Values: color name or number | transparent
Default: transparent
Applies to: all elements
Inherits: no

Example
body { background-color: yellow;}
Background Image

 The background-image property is used to set background image of an elements.

background-image
Syntax:
background-image: value;
Values: url(location)|none
Default: none
Applies to: all elements
Inherits: no

Example
 body {background-image: url(img.png);}
Background Repeating

 The background-repeat property is used to control the repetition of an image in the element.

background-repeat
Syntax:
background-repeat: value;
Values: repeat | no-repeat | repeat-x | repeat-y | space | round
Default: repeat
Applies to: all elements
Inherits: no

Example
 body { background-image: url(img.png);
 background-repeat: on-repeat;
 }
Background Position

 The background-position property is used to control the position of an image in the background.

background-position
Syntax:
background-position: value;
Values: length | percentage | left | center | right | top | bottom
Default: 0%
Applies to: all elements
Inherits: no

Example
body {background-image: url(img.png);
 background-position: center;}
Background Attachment

 The background-attachment property is used control the scrolling of an image in the background.

background-attachment
Syntax:
background-attachment: value;
Values: scroll | fixed | local
Default: scroll
Applies to: all elements
Inherits: no

Eample
body { background: white url(img.png);
background-attachment: fixed;
}
Background Size

 The background-size property is used to change the size of image in the background.

background-size
Syntax:
background-size: value;
Values: length | percentage | auto | cover | contain
Default: auto
Applies to: all elements
Inherits: no

Example
body { background-image: url(img.png)
 background-size: 600px 150px;}
Background Clip

 The background-clip property is used to control the pointing area (the area on which fill colors or applies) in the background.

background-clip
Syntax:
background-clip: value;
Values: border-box | padding-box | content-box
Default: border-box
Applies to: all elements
Inherits: no

Example
body { padding:1em;
 border: 4px dashed;
 color: green;
 background-color: red;
 background-clip: padding-box;
 }
Opacity

 The opacity property is used to control a transparency of applied color or background.

opacity
Syntax:
opacity: value;
Values: number(0 to 1)
Default: 1
Applies to: all elements
Inherits: no

Example
 h1 {color: red;
 background-color: white;
 opacity: .25;
 }
Background

 The background property is used to specify all background style in on declaration.

background
Syntax: background: value;
Values: background-color background-image background-repeat background-attachment background-position background-clip background-size
Default: see individual properties
Applies to: all elements
Inherits: no

Example
 body {background: green url(img.png) on-repeat right top fixed;}

Leave a Reply