Home
About
Editor Web OL
Code Learn
Html - 5
Css - 3
Code StyleCss 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;
}
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.
on one element.
Note: The value "inherit" is not supported in IE7 and earlier. IE8
requires a !DOCTYPE. IE9 supports "inherit".
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;
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;
}
{
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".
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);
}
{
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".
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.
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;
}
{
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.
on one element.
Note: The value "inherit" is not supported in IE7 and earlier. IE8
requires a !DOCTYPE. IE9 supports "inherit".
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;
}
{
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".
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".
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;
}
{
background-image:url('paper.gif');
background-repeat:repeat-y;
}
Definition and Usage
The background-repeat property sets if/how a background image will berepeated.
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".
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.
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 |
When using a background image, use an image that does not disturb the text.
