April 19, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

Background Properties

  • October 1, 1999
  • By Jerry Honeycutt
  • Send Email »
  • More Articles »

HTML style sheets provide you the capability to decorate the background of an element by using color and images. Note that using the properties described in the following sections doesn't define the background for the Web page as a whole. These properties set the background of an element on the Web page. For example, if you define a background for the <UL> tag, as in the following example, then the background only appears within each occurrence of that tag on the Web page.

UL {background-image: URL(http://www.myserver.com/images/watermark.gif)}

You can group the background properties described in the following sections using background. You specify the background color, image, repeat, attachment, and position like this:

background: white URL(http://www.myserver.com/images/bg.gif) repeat-x fixed top, left

background-attachment

The background-attachment property determines whether the background image is fixed in the browser window or scrolls as the user scrolls the window. You can use this property to create a watermark behind your Web page that stays put regardless of which portion of the Web page the user is viewing.

You can assign two possible values to background-attachment, as described in Table B.1.

Table B.1  background-attachment Values

Value Description
fixed The image is fixed within the browser window.
scroll The image scrolls as the user scrolls the window.

background-color

You can change the background color for an element by using the background-color property. You can assign one of the valid color names to background-color or an RGB value such as #808080 (white). For example, if you define a style for the <UL> tag that changes the background color to blue, then all the unordered lists in your HTML file will be displayed with a blue background.


TIP: Changing the background color for certain types of tags is useful to highlight information on the Web page.

background-image

You can display a background image in an element by setting the value of the background-image property to the URL of an image. This has the effect of a watermark displayed behind that element on the Web page (the element's content is displayed over the background image).

You set the URL by using the URL(address) format, like this:

H1 {background-image: URL(http://www.myserver.com/images/heading.gif)}


Units in CSS1
Most style sheet properties accept some sort of length. You can use many different units to specify a length, too. HTML supports two types of units: relative and absolute lengths. The following table describes the relative units.
Unit Example Description
em 0.5em The height of the element's font, relative to the output device
ex 0.75ex The height of the letter X, relative to the output device
px 15px Pixels, relative to the output device

Whenever possible, use relative units so that your Web pages will scale better from one device to the next. You can also use the absolute units as described in the following table.
Unit Example Description
in .5in Inches
cm 1cm Centimeters
mm 20mm Millimeters
pt 12pt Points (1pt = 1/72 inch)
pc 1pc Pica (1pc = 12pt)

Aside from relative and absolute lengths, you can also specify most lengths in terms of percentages. With HTML style sheets, percentages are almost always relative to the parent element. For example, if you're specifying a font size of 50 percent, what you're really saying is that you want the element's font size to be half as big as the parent element's font size.

background-position

You change the position of the background image by using the background-position property. The position is always relative to the top-left corner of the element in which you're positioning the image. That is, if you're positioning an image for the <UL> tag, the image's position will be relative to the top-left corner of the unordered list.

The background-position property looks like

background-position: x y

where x is the horizontal position, and y is the vertical position of the image. x and y can be a percentage, which is relative to the size of the element; a fixed amount such as 1in (one inch); or one of the keywords that indicate a relative position as described in Table B.4. For example:

background-position: center 20

Table B.2  background-position Positions

Keyword Description
top Aligns the image with the top of the containing element; only useful when substituted for y.
left Aligns the image with the left side of the containing element; only useful when substituted for x.
right Aligns the image with the right side of the containing element; only useful when substituted for y.
bottom Aligns the image with the bottom of the containing element; only useful when substituted for y.
center Centers the image within the containing element; when substituted for x, the image is centered horizontally; when substituted for y, the image is centered vertically.

background-repeat

You can cause the user's browser to tile the background image so that it fills the entire area of the containing element. The background-repeat property can have four values, as described in Table B.3.

Table B.3  background-repeat Values

Value Description
repeat Repeats the image both vertically and horizontally
repeat-x Repeats the image horizontally
repeat-y Repeats the image vertically
no-repeat Doesn't repeat the image

color

The color property determines the foreground color for the element. Thus, the browser displays the element's text using this color. You can set color to a named color or an RGB value. Named colors include those in the following list:

black silver gray white
maroon red purple fuchsia
green lime olive yellow
navy blue teal aqua

© Copyright Macmillan Computer Publishing. All rights reserved.






Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Sitemap | Contact Us

Rocket Fuel