We have already discussed some other background properties: background-color, background-image and background repeat. This lesson shows us how to position a background image with the background-position property.
The background-position property uses 2 values or a 1 value shorthand.
The form for the background-position property is:
background-position: value1 value2
value1 sets the vertical position: top, center or bottom.
value2 sets the horizontal position: left, center or right.
The possible value pairs are:
top left (default)
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
If you only enter the first value, the image will be centered on the page horizontally (from left to right). The possible values using this "shorthand" are:
top
center
bottom
You may also set the upper left corner of a background image at a specific location with percent or pixels:
x-% y-%
x-pos y-pos
The background-position property is meant to place a single instance of your background image.
If you use an external stylesheet, but only want a single background image on some pages, you can put the background image info in a internal (embedded) stylesheet.
If you use an internal stylesheet, just add the background-position information to your stylesheet.
This sample head section shows how to use an external stylesheet for your main styling and an additional internal stylesheet for your background image. You may not have a background-image in the external stylesheet to use this code.
<link rel="stylesheet" href="style2.css" type="text/css" />
<style type="text/css">
<!--
body {
background-image: url(URL_of_image);
background-repeat: no-repeat;
background-position: center center;
}
-->
</style>
Your page text will be on top of your background image, so you must choose your colors carefully to ensure that your text is still readable against the image. The demo pages below do not take this precaution so that you can see for yourself why this is important.
Unfortunately, WebTV does not support background-position and places your background image at the top left of your page. We will learn how to overcome this limitation later in the course.
These 2 demo pages show the background-image effect. Notice that the text is on top of the image. You have to scroll down to the background image on the first demo page.
Demo page 1: centered image
Demo page 2: fixed position
There is no assignment for this lesson, but may use background-position in a sample page if you would like a pc screenshot of your page.
Happy coding!
Gnubee
