Web Development Tutorials


Background Images

All of the stylesheet and DOM properties involving borders, padding, and margins have identical effects on graphic images as they do on text containers. In addition to these general properties, images also have the special style properties as background images as detailed in the following list.

CSS and DOM Reference Values
Sets the URL of a background image; url can be set to none to prevent an image from loading.
Sets the location of the left and top edges of the background image with a pair of values separated by a space. Values are

left|center|right  paired with  top|center|bottom

Locations can also be specified as pairs of percentages or pixels for the left and top values.
Sets whether a background image should repeat along the horizontal and/or vertical axes. Axes values are:
Describes whether a background image remain fixed in place or scrolls with the document. Values are:

Figure 10-28. Background styles.

The following bordered division displays a background image. By clicking the radio buttons below you can view the effects of property settings associated with this image. The "Show Text" button to the right places scrollable text into the division so you can view the background image in relation to container text. The effects shown here pertain to any type of container element, including the <body> of a document.

top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
50 50
50% 50%

Figure 10-29. Setting background styles.

<script type="text/javascript">

function ChangePos(Position) {
  document.getElementById("DIV").style.backgroundPosition = Position;

function ChangeRep(Repeat) {
  document.getElementById("DIV").style.backgroundRepeat = Repeat;

function ChangeAtt(Attachment) {
  document.getElementById("DIV").style.backgroundAttachment = Attachment;

function ShowHide() {
  if (document.getElementById("BUTTON").value == "Show Text") {
    for (var i=1; i <= 40; i++) {
      document.getElementById("DIV").innerHTML += "This is division text. ";
    document.all.BUTTON.value="Hide Text"; 
  } else {
    document.getElementById("DIV").innerHTML = "";
    document.getElementById("BUTTON").value = "Show Text";

<div id="DIV" style="width:450px; height:100px; overflow:auto; border:solid 1px; 
  background-repeat:no-repeat; background-image:url('jsdhtml.gif'); float:left">
<input id="BUTTON" type="button" value="Show Text" onclick="ShowHide()"/>

<table border="1">
<input type="radio" name="Pos" onclick="ChangePos('top left')" checked/>top left<br/>
<input type="radio" name="Pos" onclick="ChangePos('top center')"/>top center<br/>
<input type="radio" name="Pos" onclick="ChangePos('top right')"/>top right<br/>
<input type="radio" name="Pos" onclick="ChangePos('center left')"/>center left<br/>
<input type="radio" name="Pos" onclick="ChangePos('center center')"/>center center<br/>
<input type="radio" name="Pos" onclick="ChangePos('center right')"/>center right<br/>
<input type="radio" name="Pos" onclick="ChangePos('bottom left')"/>bottom left<br/>
<input type="radio" name="Pos" onclick="ChangePos('bottom center')"/>bottom center<br/>
<input type="radio" name="Pos" onclick="ChangePos('bottom right')"/>bottom right<br/>
<input type="radio" name="Pos" onclick="ChangePos('50 50')"/>50 50<br/>
<input type="radio" name="Pos" onclick="ChangePos('50% 50%')"/>50% 50%<br/>
<input type="radio" name="Rep" onclick="ChangeRep('no-repeat')" checked/>no-repeat<br/>
<input type="radio" name="Rep" onclick="ChangeRep('repeat')"/>repeat<br/>
<input type="radio" name="Rep" onclick="ChangeRep('repeat-x')"/>repeat-x<br/>
<input type="radio" name="Rep" onclick="ChangeRep('repeat-y')"/>repeat-y<br/>
<input type="radio" name="Att" onclick="ChangeAtt('scroll')" checked/>scroll<br/>
<input type="radio" name="Att" onclick="ChangeAtt('fixed')"/>fixed<br/>

Listing 10-21. Code to set background styles.

TOP | NEXT: Chapter 11 - Error Handling