• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 14. Background Properties > background-position-x and background-positi...

14.7. background-position-x and background-position-y Properties

In order to provide Web authors with greater control over exactly where background images can begin tiling themselves as a background, Microsoft introduced two new, browser-specific background properties with the release of version 5.5 of Internet Explorer: background-position-x and background-position-y. Both properties are used in conjunction with the background-image property, and are used to set the position where the background image begins to start tiling. Note that this does not mean that you can set exactly where the background-image is to start tiling within an element on a Web page; instead they position the background image relative to itself — so a setting of 0,0 does not refer to the top-leftmost portion of the background element, but the top-leftmost position of the image itself.

Both background-position-x and background-position-y can take percentage and specific length measures. A value of 50% means that the background image should start tiling at exactly half of its vertical (or horizontal) dimension. When a length measure — such as pixels — is used, Internet Explorer begins tiling the background image at the point specified. Listing 14.10 shows how these values can be applied using the background-position-x property:

Listing 14.10. Various Background Properties the Equivalent of the Previous Background Code Example

<html>
<title>background-position-x Example 1</title>
<style>
div.fixed-length {background-image: url(antony_rsc-12.jpg);
background-position-x: 0 px; height: 140px; width: 400px; font: 
large Arial, Helvetica, sans-serif; color: navy}
div.percentage {background-image: url(antony_rsc-12.jpg); 
background-position-x: 50%; height: 140px; width: 400px; font: 
large Arial, Helvetica, sans-serif; color: navy}
div.negative-value {background-image: url(antony_rsc-12.jpg); 
background-position-x: -100px; height: 140px; width: 400px; font: 
large Arial, Helvetica, sans-serif; color: navy}
code {font: large Arial, Helvetica, sans-serif; color: navy; 
background-color: white}
</style>
</head>
<body>
<p>
<div class="fixed-length">This image is positioned using 
<code>background-position-x: 0 pixels</code> (so it appears as it
would normally be tiled).</div>
</p>
<p>
<div class="percentage">This image is positioned using 
<code>background-position-x: 50%</code>.</div>
</p>
<p>
<div class="negative-value">This image is positioned using 
<code>background-position-x: -100 pixels</code>.</div>
</p>
</body>
</html>


					  

Figure 14-12. The background-position-x property using fixed-length, percentage and negative values, as seen with Internet Explorer 6.0.


As this example shows, it is also possible to set a negative value to background-position-x (and background-position-y). In this case the negative value tells the browser to start tiling the image beginning 100 pixels “in” to the left side of the image.

Both background-position-x and background-position-y also have specific named values as well: background-position-x can take on left, center and right; background-position-y can take top, center and bottom. These values behave slightly different than the percentage and length values — these values do not refer to a coordinate within the image, but how the background image is initially positioned within a Web element containing the background image. So a value of right tells the browser to put the “first” background image on the right-hand side, and begin tiling leftward and down from there. A value of “bottom” tells the browser to put the initial background image at the bottom of the element to tile up from there. Figure 14-13 shows how the three values for background-position-x can be used.

Listing 14.11. background-position-x Example Using the left, center and right Values

<html>
<head>
<title>background-position-x Example 2 (left, center and right
values)</title>
<style>
div.left {background-image: url(antony_rsc-12.jpg); 
background-position-x: left; height: 140 px; width: 400 px; font: 
large Arial, Helvetica, sans-serif; color: navy}
div.center {background-image: url(antony_rsc-12.jpg);
background-position-x: center; height: 140 px; width: 400 px; font: 
large Arial, Helvetica, sans-serif; color: navy}
div.right {background-image: url(antony_rsc-12.jpg); 
background-position-x: right; height: 140 px; width: 400 px; font: 
large Arial, Helvetica, sans-serif; color: navy}
code {font: large Arial, Helvetica, sans-serif; color: navy; 
background-color: white}
</style>
</head>
<body>
<p>
<div class="left">This image is positioned using 
<code>background-position-x: left</code> (the default
setting).</div>
</p>
<p>
<div class="center">This image is positioned using 
<code>background-position-x: center</code>.</div>
</p>
<p>
<div class="right">This image is positioned using 
<code>background-position-x: right</code>.</div>
</p>
</body>
</html>


					  

Figure 14-13. The background-position-x property using left, center and right values, as seen with Internet Explorer 6.0.


Core Tip

There's one other little trick you have to know about if you intend to use these properties — ensure that you are using the proper <!doctype> statement. When using background-position-x or background-position-y make sure you do not use the standard XHTML <!doctype> declaration — these properties will only work when the document is set as a transitional or frameset HTML 4.0 document (i.e., <!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN"> or <!doctype html public "-//W3C//DTD HTML 4.0 Frameset//EN">). If <!doctype> is set to strict HTML 4.0 or XHTML 1.0, the effect of these properties will be “turned off” when viewed under Internet Explorer 6.0, as it has the ability to process the contents of a Web page in accordance with the <!doctype> setting.


  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint