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

Chapter 14. Background Properties > background-position Property

14.5. background-position Property

The background-position property provides a feature that is otherwise impossible in regular HTML: the exact positioning of a background image on a Web page. It is always used in conjunction with the background-image property, and can take either a precise X,Y pixel value, a percentage value or a special keyword value.

You can set an X,Y value that tells the background image where it should be initially displayed. X is the value in pixels the image will appear from the left of the browser window, and Y is the number of pixels the image will appear from the top of the browser window. It can also take on an inherit value, which adopts whatever parent value may be available. The code example Listing 14.5, depicted in Figure 14-7, shows this in action.

Listing 14.5. background-position Example Set to Specific X and Y Values

<html>
<head>
<title>background-position Example</title>
<style>
body {background-image: url(annie.jpg); background-position: 160px
160px; background-repeat: no-repeat; font-size: x-large}
</style>
</head>
<body>
This background image is positioned 160 pixels from the top of the 
browser window and 160 pixels from the left of the browser window.
It does not tile because <code>background-repeat</code> is set to
<code>no-repeat</code>.
</body>
</html>

Figure 14-7. background-position example set to a specific X,Y pixel value, with background-repeat set to no-repeat, as seen within Opera 6.0.


What this code does is position the image called annie.jpg and begin tiling it 160 pixels from the right and 160 pixels from the top. Notice that the additional property background-repeat: no-repeat has been set; this has been done to show off the effect more clearly. When it is removed, the image is simply tiled over the whole of the Web page, with the first image offset by the value determined by background-position, as can be seen in Figure 14-8. (Note that the color of the text has been changed as well in order to make it visible.)

Figure 14-8. background-position example set to a specific X,Y pixel value, with no background-repeat value set, as seen within Netscape Navigator 6.0.


The background-position property can also take a percentage value, where the X and Y values are set relative to the width of the browser's window. If it is set to a value of 50% for both values (as it is in Listing 14.6) the image will be centered in the middle of the browser window.

Listing 14.6. background-position Example with X and Y Values Set to Percentages

<html>
<head>
<title>background-position Example 3</title>
<style>
body {background-image: url(annie.jpg); background-position: 50% 
50%; font-size: x-large; color: white}
</style>
</head>
<body>
This background image is positioned using a value of 50% of the 
browser window's height by 50% of the browser's height, which 
means it should be centered in the middle of the screen.
<code>background-repeat: no-repeat</code> been added to make the
effect stand out more.
</body>
</html>

Figure 14-9. background-position set to a value of 50% for both X and Y, centering the background image in the browser's window, as seen within Mozilla 1.0.


A number of keyword values can also be used to position a background image with the background-position property. The keywords left, center and right can be used for the X value, and top, center and bottom can be used for the Y value.

These keyword values offer a simple shortcut for Web authors who want to ensure that a background image always begins in any of the corners of a browser window or aligned within its center. This has an edge over percentage or pixel values, as you can never be sure how wide your users will size their browser's window. Listing 14.7, depicted in Figure 14-10, shows the X and Y values set to right and bottom, respectively (again, using background-repeat: no-repeat to clearly show the effect).

Listing 14.7. background-position Example with X and Y Values Set to Percentages

<html>
<head>
<title>background-position Example 4</title>
<style>
body {background-image: url(annie.jpg); background-position: right 
bottom; background-repeat: no-repeat; font-size: x-large}
</style>
</head>
<body>
This background image is positioned with the X and Y values set to
<code>right</code> and <code>bottom</code> respectively.
<code>background-repeat: no-repeat</code> has been added to make 
the effect stand out more.
</body>
</html>

Figure 14-10. background-position set to bottom and right, with no background-repeat set to no-repeat, as seen with Internet Explorer 6.0.


This property is arguably most effective (or at least most distinct) when combined with the background-repeat property set to no-repeat, as can be seen in the many code examples in this section. If you want the background image to stand out on your Web page, you can use the background-position and background-repeat properties effectively for this purpose.

Browser Compatibility

This is another property that was first implemented fully within Internet Explorer (and Opera) well before it was adopted within Netscape Navigator. Versions of Netscape Navigator including and prior to 4.79 should be considered unsafe for using this property.

  • Internet Explorer 3.0: Unsafe.

  • Internet Explorer 4.0: Safe.

  • Internet Explorer 4.0 – 4.5 (Mac): Safe.

  • Internet Explorer 5.0: Safe

  • Internet Explorer 5.1 – 5.2 (Mac): Safe.

  • Internet Explorer 5.5: Safe

  • Internet Explorer 6.0: Safe

  • Netscape Navigator 4.0 – 4.79: Unsafe. Image is tiled as if background-position were not present.

  • Netscape Navigator 4.0 (Mac & UNIX): Unsafe. Ditto above.

  • Netscape Navigator 6.0: Safe.

  • Netscape Navigator 7.0: Safe.

  • Mozilla 1.0: Safe.

  • Opera 3.6: Safe

  • Opera 5.0: Safe

  • Opera 6.0: Safe

  • Konqueror: Safe.

Internet Explorer began implementing this property beginning with version 4.0.

This property is not safe to use in Netscape Navigator 4.x, as the image is tiled as if background-position were not present. This problem was corrected by the launch of Netscape Navigator 6.0 (and Mozilla 1.0).

Opera was an early adopter of this property, first incorporating it within version 3.6.

Konqueror implements this property fully.

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