 |
 |
Feature highlight: Using CSS to Set Backround Styling
Description
Using CSS to apply unique backround image styling and not just for the whole
page but also unique settings for table cells etc.
Background
Besides fontstyling the another area that CSS styles are pretty consistent
across all browsers is in the page backround settings. CSS allows Web developers
to go well beyond the settings available in HTML's <body> tag. This
tip explores some of those options.
Key features and CSS elements
The trick is to know the syntax for the various background
settings that are available to developers using CSS stylesheets. They are
listed below:
background image - allows any jpg or gif file including animated
gifs
background color - offers usual color palette; will be used
with image for various repeat options
repeat - has four options which apply to the background image
.. repeat-x means the image will only be repeated or tiled
along the x/horizontal axis;
.. repeat-y means the background image will only be repeated
or tiled along the y or vertical axis;
.. no-repeat means the background image is not tiled at all
.. repeat means that the background image will be tiled
attachment - works for some but not all browsers, specifies
whether the backround image scrolls
.. fixed - the initial backround image does not scroll but
tiles or not depnding on repeat setting
.. scrolls - the initial background image scrolls with user
through the page
horizontal position - the initial offset from the x-axis
the background image starts at
vertical position - the initial offset from the y-axis the
background image starts at
Here is the code for the .backer style used on this page:
.backer {
background-attachment: fixed;
background-color: #CCFFFF;
background-image: url(jbsback2.gif);
background-repeat: repeat-x;
background-position: 0px 40px;
}
And this is how the body tag looks: <body class="backer">.
Note class=".backer" would also work. Save this file to disk (File
| Save As) and then try changing the repeat and position and other parameters
to see how much control over the backround you now have.
Top of Page Tutorials Home JavaScript References JavaScript Books