CSS #5 Using CSS for Positioning Graphics
Up to this point you have used CSS to apply styles but the other area that CSS was designed for was to control positioning of objects on the web page. In this exercise you will apply a background image to your web page and then use CSS to control the positioning of that image.
Here is the image that you will apply to your web page:
This image was created in Fireworks and exported as a gif file. Save this image to your CSS folder and call it background.gif.
Create a new web page and call it css_position.html. Create an embedded style for this web page that makes use of the background property. You will apply this property to the body selector (tag).
Property Value Description of Property Examples background-color red, green, blue, #FF0000, #00FF00, #0000FF,
rgb(255,0,0), or
rgb(100%, 0%, 0%).Assigns a background color. Replaces the BGCOLOR attribute in the <BODY> and <TR>tags. {background-color: #FFFFFF } background-image url(background.gif) Places the image as a background image for the page. {background-image: url(background.gif)} background-attatchment scroll or fixed Scroll is the default that allows the image to move with the text when a visitor scrolls through a page. Fixed keeps the background fixed while the text scrolls. This provides some interesting effects on a web page. {background-attatchment: fixed} background-position top, center, bottom, left, right
5% offsets the image
Determines where the image will be placed on the page.
{background-position: center}
{background-position: 5%}
background-repeat
no-repeat
repeat-x
repeat-y
Tiles an image in the background. The background-repeat property repeats an image both vertically and horizontally. Repeat-x repeats across the page and repeat-y repeats down the page. Replaces the BACKGROUND attribute in the <BODY> tag. {background-repeat:
no-repeat}{background-repeat:
repeat-y}{background-repeat:
repeat-x}1. Use the background-image property to make the background.gif image the background for this document. Since you have not applied any other properties to this page the default values will be automatically applied. What is the default for the background-repeat value?
2. Add the background-repeat property to your style. First try the repeat-x value. Describe what the page looks like. Try the repeat-y value and describe what the page looks like. Try the no-repeat value and describe what the page looks like. Replace the no-repeat value with the repeat-y value and then continue.
3. Apply the background-position property and use a value of right. What happens to the page? Change the value from right to 5%, what happens?
4. Apply an appropriate background color to the page using the appropriate property.
5. Add some text with paragraph tags and cut and paste the text and <p> tag so the page scrolls. Remove the repeat-y value and apply the no-repeat value. Now add the background-attachment property and make it fixed. What happens to the image when you scroll through the text on the page? Change the value to scroll. What happens to the image as you scroll now?
6. Demonstrate your web page to your instructor for teacher check.
