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 |
background-image:url(url)
object.backgroundImage="url"
|
Sets the URL of a background image; url can be
set to none to prevent an image from loading. |
background-position:location
object.backgroundPosition="location"
|
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. |
background-repeat:axes
object.backgroundRepeat="axes"
|
Sets whether a background image should repeat along the horizontal and/or vertical axes.
Axes values are:
no-repeat
repeat
repeat-x
repeat-y
|
background-attachment:value
object.backgroundAttachment="value"
|
Describes whether a background image remain fixed in place or scrolls with the document.
Values are:
fixed
scroll
|
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.
<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";
}
}
</script>
<div id="DIV" style="width:450px; height:100px; overflow:auto; border:solid 1px;
background-repeat:no-repeat; background-image:url('jsdhtml.gif'); float:left">
</div>
<input id="BUTTON" type="button" value="Show Text" onclick="ShowHide()"/>
<table border="1">
<tr>
<td>
<b>backgroundPosition</b><br/>
<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/>
</td>
<td>
<b>backgroundRepeat</b><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/>
</td>
<td>
<b>backgroundAttachment</b><br/>
<input type="radio" name="Att" onclick="ChangeAtt('scroll')" checked/>scroll<br/>
<input type="radio" name="Att" onclick="ChangeAtt('fixed')"/>fixed<br/>
</td>
</tr>
</table>
Listing 10-21. Code to set background styles.