CSS Background Properties

Css Background Properties

Property	Description
background	Sets all the background properties in one declaration
background-attachment	Sets whether a background image is fixed or scrolls with the rest of the page
background-color	Sets the background color of an element
background-image	Sets the background image for an element
background-position	Sets the starting position of a background image
background-repeat	Sets how a background image will be repeated

background

Set all the background properties in one declaration:

body

{

background: 00ff00 url('smiley.gif') no-repeat fixed center;

}

Browser Support

The background property is supported in all major browsers.

Note: IE8 and earlier do not support multiple background images
on one element.

Note: The value "inherit" is not supported in IE7 and earlier. IE8
requires a !DOCTYPE. IE9 supports "inherit".

Definition and Usage

The background shorthand property sets all the background properties in one declaration.
The properties that can be set, are: background-color,
background-position, background-size, background-repeat, background-origin,
background-clip, background-attachment, and background-image.
It does not matter if one of the values above are missing, e.g. background:ff0000 url(smiley.gif); is allowed.

Default value:	see individual properties
Inherited:	no
Version:	CSS1 + new properties in CSS3
JavaScript syntax:	object.style.background="red url(smiley.gif) top left no-repeat"

Syntax

background: color position size
repeat origin clip attachment
image;

Value	Description	CSS
background-color	Specifies the background color to be used	1
background-position	Specifies the position of the background images	1
background-size	Specifies the size of the background images	3
background-repeat	Specifies how to repeat the background images	1
background-origin	Specifies the positioning area of the background images	3
background-clip	Specifies the painting area of the background images	3
background-attachment	Specifies whether the background images are fixed or scrolls with the rest of the page	1
background-image	Specifies ONE or MORE background images to be used	1

background-attachment

How to specify a fixed background-image:

body
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
}

Definition and Usage

The background-attachment property sets whether a background image is fixed or scrolls with the rest of the page.

Default value:	scroll
Inherited:	no
Version:	CSS1
JavaScript syntax:	object.style.backgroundAttachment="fixed"

Browser Support

The background-attachment property is supported in all major browsers.

Note: The value "inherit" is not supported in IE7 and earlier. IE8
requires a !DOCTYPE. IE9 supports "inherit".

Property Values

Value	Description
scroll	The background image scrolls with the rest of the page. This is default
fixed	The background image is fixed
inherit	Specifies that the setting of the background-attachment property should be inherited from the parent element

background-color

Set the background-color of different elements:

body
{
background-color:yellow;
}
h1
{
background-color:00ff00;
}
p
{
background-color:rgb(255,0,255);
}

Definition and Usage

The background-color property sets the background color of an element.
The background of an element is the total size of the element, including
padding and border (but not the margin).

Default value:	transparent
Inherited:	no
Version:	CSS1
JavaScript syntax:	object.style.backgroundColor="00FF00"

Browser Support

The background-color property is supported in all major browsers.

Note: The value "inherit" is not supported in IE7 and earlier. IE8
requires a !DOCTYPE. IE9 supports "inherit".

Tips and Notes

Tip: Use a background color and a text color that makes the text easy
to read.

Property Values

Value	Description
color	Specifies the background color.
transparent	Specifies that the background color should be transparent. This is default
inherit	Specifies that the background color should be inherited from the parent element

background-image

Set a background-image for the body element:

body
{
background-image:url('paper.gif');
background-color:cccccc;
}

Definition and Usage

The background-image property sets one or more background images for an element.
The background of an element is the total size of the element, including
padding and border (but not the margin).
By default, a background-image is placed at the top-left corner of an
element, and repeated both vertically and horizontally.

Default value:	none
Inherited:	no
Version:	CSS1
JavaScript syntax:	object.style.backgroundImage="url(stars.gif)"

Browser Support

The background-image property is supported in all major browsers.

Note: IE8 and earlier do not support multiple background images
on one element.

Note: The value "inherit" is not supported in IE7 and earlier. IE8
requires a !DOCTYPE. IE9 supports "inherit".

Tips and Notes

Tip: Always set a background-color to be used if the image is unavailable.

Property Values

Value	Description
url('URL')	The URL to the image. To specify more than one image, separate the URLs with a comma
none	No background image will be displayed. This is default
inherit	Specifies that the background image should be inherited from the parent element

background-position

How to position a background-image:

body
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}

Definition and Usage

The background-position property sets the starting position of a background image.

Note: For this to work in Firefox and Opera, the background-attachment
property must be set to "fixed".

Default value:	0% 0%
Inherited:	no
Version:	CSS1
JavaScript syntax:	object.style.backgroundPosition="center"

Browser Support

The background-position property is supported in all major browsers.

Note: The value "inherit" is not supported in IE7 and earlier. IE8
requires a !DOCTYPE. IE9 supports "inherit".

Property Values

Value	Description
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 ypos	The 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
inherit	Specifies that the setting of the background-position property should be inherited from the parent element

background-repeat

Repeat a background-image only vertically:

body
{
background-image:url('paper.gif');
background-repeat:repeat-y;
}

Definition and Usage

The background-repeat property sets if/how a background image will be
repeated.
By default, a background-image is repeated both vertically and horizontally.

Default value:	repeat
Inherited:	no
Version:	CSS1
JavaScript syntax:	object.style.backgroundRepeat="repeat-y"

Browser Support

The background-repeat property is supported in all major browsers.

Note: The value "inherit" is not supported in IE7 and earlier. IE8
requires a !DOCTYPE. IE9 supports "inherit".

Tips and Notes

Tip: The background image is placed according to the
background-position property. If no background-position is specified, the image
is always placed at the element’s top left corner.

Property Values

Value	Description
repeat	The background image will be repeated both vertically and horizontally. This is default
repeat-x	The background image will be repeated only horizontally
repeat-y	The background image will be repeated only vertically
no-repeat	The background-image will not be repeated
inherit	Specifies that the setting of the background-repeat property should be inherited from the parent element

Selasa, 06 November 2012