Lesson 10 - Cascading Style Sheets/Background

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:
  • 'top left' and 'left top' both mean the same as '0% 0%'.
  • 'top', 'top center' and 'center top' mean the same as '50% 0%'.
  • 'right top' and 'top right' mean the same as '100% 0%'.
  • 'left', 'left center' and 'center left' mean the same as '0% 50%'.
  • 'center' and 'center center' mean the same as '50% 50%'.
  • 'right', 'right center' and 'center right' mean the same as '100% 50%'.
  • 'bottom left' and 'left bottom' mean the same as '0% 100%'.
  • 'bottom', 'bottom center' and 'center bottom' mean the same as '50% 100%'.
  • 'bottom right' and 'right bottom' mean the same as '100% 100%'.

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:

I was in the grocery store; the sign said "Pet Supplies", so I did; Then I went outside and saw a sign that said "Compact Cars". I went to the hardware store and bought some used paint; it was in the shape of a house. I bought some batteries, but they weren't included, so I had to buy them again. What's another word for Thesaurus? For a while I didn't have a car--I had a helicopter; there was no place to park it, so I tied it to a lamp post and left it running.

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
By now, your sample2.htm file should look like this.
For more information on the topics of this Lesson, see this site.

Lesson 9 CSS/Fonts   < <  PREVIOUS   Table of Contents NEXT  > >   Lesson 11 CSS/Text

Developed with HTML-Kit
Sandersongs Web Tutorials
Contact the Webmasterwith comments.
©2017, by Bill Sanders, all rights reserved.
This domain had 3,978 different visits in the last 30 days.
435,453 hits on this domain since 24 Nov 2006.
http://sandersongs.com/HTMLcourse/Lesson10.php
This page was last modified on our server on 26 Sep 2013
and last refreshed on our server at 12:29 pm, MST
This file took 0.00874 seconds to process.