The background of your web page can be any one of a number of colors, or an image, or a combination. The background can be for the entire page (Body tag) or for individual entities (Paragraph tags, etc.). Here are the style properties that affect backgrounds:
| background-color: | sets the background color. In addition to all visible colors, you can also use 'transparent'. (try it) |
| background-image: | possible values are 'none' or the URL of the image you want shown. (try it) |
| background-repeat: | possible values are 'repeat-x', 'repeat-y' or 'no-repeat'. If you provide a background image that is smaller than the screen size, you can repeat it over and over again in the X direction and/or Y direction. (try it) |
| background-attachment: | possible values are 'scroll' or 'fixed'. If you choose 'scroll', the background scrolls with the page contents, giving the appearance the two are stuck together. If you choose 'fixed', the background stays put while the page contents scroll over it. (try it) |
| background-position: | Don't try to memorize this; read it once and refer back
as needed. Requires two inputs, one for the horizontal position and one for the vertical. Possible values are '#%', 'length', 'top/center/bottom', 'left/center/right'. If a background image has been specified, the value of 'background-position' specifies its initial position. (try it) With a value pair of '0% 0%', the upper left corner of the image is placed in the upper left corner of the box that surrounds the content of the element (i.e., not the box that surrounds the padding, border or margin). A value pair of '100% 100%' places the lower right corner of the image in the lower right corner of the element. With a value pair of '14% 84%', the point 14% across and 84% down the image is to be placed at the point 14% across and 84% down the element. With a value pair of '3cm 2cm', the upper left corner of the image is placed 3cm to the right and 2cm below the upper left corner of the element. If only one percentage or length value is given, it sets the horizontal position only, the vertical position will be 50%. If two values are given, the horizontal position comes first. Combinations of length and percentage values are allowed, e.g. '50% 2cm'. One can also use keyword values to indicate the position of the background image. Keywords cannot be combined with percentage values, or length values. The possible combinations of keywords and their interpretations are as follows:
|
Open sample2.htm, locate the Style tags within your Head section, and within the Body style declarations, add:
<style type="text/css">
<!--
body { color:fuchsia; font-family:"Times New Roman";
font-style:italic; font-variant:small-caps;
font-weight:bold; font-size:14pt;
background-color:yellow }
-->
</style>
. . .
Be sure you have a semicolon after each declaration. How does your web page look now? Change the background color to something dark--like 'navy', and change the font color to something light, like 'aqua'. Change the colors back to whatever you like.
Right-click on any part of the background of this page. If you are using an Internet Explorer compatible browser, select 'Save Background As', then save the image in your Development directory. Let's see how it looks. Add the following (substituting the name you gave your image file for the 'backiv.gif' shown below):
<style type="text/css">
<!--
body { color:black; font-family:"Times New Roman";
font-style:italic; font-variant:small-caps;
font-weight:bold; font-size:14pt;
background-color:yellow;
background-image: url(backiv.gif)
}
-->
</style>
. . .
It would look like so:
Note that we show a background color and a background image. The background image will always prevail unless it fails for some reason, then the backup color will show.
Other backgrounds are shown below. Right-click on each and try them all. (A *.bmp image is Internet Explorer proprietary. It will not display in any other browser.)
You can also change the background color of other HTML tags. Try this:
<style type="text/css">
<!--
body { color:black; font-family:"Times New Roman";
font-style:italic; font-variant:small-caps;
font-weight:bold; font-size:14pt;
background-color:beige }
p { color:green; background-color:#c0ffc0 }
-->
</style>
. . .
Lastly, you can use a short-cut version of all of the background declarations. Similar to the short-cut for the font declarations, you list 'background:' followed by any or all of the background values you want in any order. It looks thus: background:beige url("Bkground.gif") repeat-x (try it)
- In this lesson, we learned about these Style properties:
- background-color
- background-image
- background-repeat
- background-attachment and
- background-position
For more information on the topics of this Lesson, see this site.
