|Property Name||Some Possible Values||What It Does|
|background||(All background properties at once)||Sets background|
|background-color||(Any color)||Background color|
|background-repeat||repeat-x | repeat-y | no-repeat||Tile background?|
|background-position||top left | 50% 100%||Position?|
|background-attachment||fixed | scroll||Fixed or scroll?|
backgroundis written as follows:
background: color image repeat position attachment;
color= Any named color or hexadecimal color code.
image= Path to any background image file.
repeat= A value that defines how the background image is repeated.
position= A pair of values that set the background image's position.
attachment= Any value(s) applicable to
backgroundproperty is declared and then followed by a space-separated list of values pertaining to any one or more of the above.
background: orange url("test.jpg") no-repeat center center fixed;
backgroundshorthand property can be set individually using the following CSS properties:
#ffffcc, etc. (Please see font color for more about what colors you can use for any HTML or CSS code.)
url("path to any image file")where
path to any image fileequals any relative or absolute path to the image file you wish to display as a background.
background-repeatproperty to control this behaviour. The value can be any one of the following:
repeat-x- The background image is only repeated horizontally.
repeat-y- The background image is only repeated vertically.
no-repeat- The background image is only displayed once.
background-positionto define exactly where the background image is displayed on your web page.
background-position: 0% 50%;
background-position: 50% 100%;
background-position: 20px 40px;
background-position: right bottom;
<body>tag doesn't work in Firefox (or any Gecko-based browser for that matter) then here comes the CSS property
background-attachmentto the rescue. This can be used to make the background image remain fixed in place while the rest of the web page content scrolls over it.
<body style="background-attachment: fixed;" background="example.jpg">
backgroundshorthand property described above (
paddingare also defined for demonstrational purposes):
<p style='background: orange url("sunset.jpg") no-repeat 0px 20px; height: 100px; padding: 20px;'>It was a beautiful sunset...</p>
Note that in the inline style above, we're obliged to nest one set of quotation marks within another to declare the path to the background image within the
styleattribute. If we used double quotation marks for both
url("..."), the web page would get messed up because the
styleattribute would end prematurely. Hence we'll opt to use single quotation marks for the
style=' '] and double quotation marks for the path to the background image [
background: orange url("sunset.jpg") no-repeat 0px 20px;
<p>It was a beautiful sunset...</p>
It was a beautiful sunset...
And the lowdown on what's happening here is:
- The height of the paragraph is 100 pixels.
- The padding on all sides of the paragraph is 20 pixels.
- The background color is orange.
- The background image is "sunset.jpg" and is:
- Not repeated (only displayed once).
- Set flush with the left border (0 pixels).
- Set 20 pixels from the top border.
If you need a .COM web address, you can get one quick and easy at...
|<~ BACK||TOP||NEXT ~>|