Chapter 8

Adding Graphics to Web Pages

CSS and The IMG Tag

CSS does not have any properties specifically aimed at formatting images

Use properties you have already learned, i.e., Borders Padding Float Margins

Use CLASS styles or DECENDENT selectors to affect IMG tags and thus, the images themselves.

Background Images

Check out Zen Garden for the power of background images

In the past, you used the body’s background to place an image that repeated itself in order to fill the page—hopefully subtlety

Now, we will use the background image for affect and control its position To insert an image, as a background, use the following

in the body tag. body {background-image: url(images/bg.gif);

PathsAn images path (location) is very important

url (../images/bg.gif) /*document-relative */ url (/Images/bg.gif) /*root-relative */

home page

images folder

styles folder

2

1

Controlling Repetition

The “Background Repeat” property controls or specifies how an image repeats background-repeat: no-repeat;

There are four (4) values: repeat, no-repeat, repeat-x, and repeat-y

no-repeat = displays the image once, no tiling . repeat-x = repeats an image horizontally repeat-y = repeats an image vertically

Position a Background Image

Use two (2) sets of keywords to position an image on a background. To control horizontal position

left, center, right To control vertical position

top, center, bottom

Example: body {

background-image: url(bg_page.jpg); background-repeat: no-repeat; background-position: center center; }

Precise Values

You can position images using pixels or emsYou must use two elements

one indicates the distance between the image’s left edge and the container’s left edge.

another specifies the distance between the image’s top edge and the style’s top edge

(first controls the horizontal position, the second controls the vertical position)

You CANNOT specify distances from the bottom or right using pixels or ems

If you want an image in the bottom right corner, use keywords or percentages

You can also use negative values to move an image off the right edge or above the top edge of a page

You can use a negative property to crop part of a picture

If a background image has a lot of white space at the top, you can use a negative position to eliminate the white space

Percentage Values

Using percentages is tricky If you can get the affect you are after using

keywords, it is preferred However, if you want to place an image

proportional to the width of an element, use percentages

Percentage values are useful when you want a background image in a sidebar that takes up the width of the bar, and the sidebar is floated.

As with Pixels and ems, you provide two values (percentages) one for vertical and one for horizontal placement

EXAMPLE: to position an image in the center of a page,

background-position: 50% 50%;

0% 0%

100% 100%

50% 50%

80% 20%

Fixing an Image in Place

Normally, if there is a background image, when the visitor scrolls down the page, the image scrolls also

This makes it seem that the pattern or image moves with the scrolling.

If the image is non-repeating, it will seem to scroll off the top of the page.

If you are using a company logo or watermark, you may not want the image to scroll or to scroll off the page.

Solution—Background-Attachment

The “Background Attachment” property has two options scroll = normal web page behavior fixed = keeps image in place whether the viewer

scrolls or not. body {

background-image: url(images/logo.gif); background-repeat: no-repeat: background-attachment: fixed; }

Fixed Position of Background Image

A fixed position is nice when using a repeating, tiled background when you scroll down the page, the text

disappears off the top, but the background doesn’t move.

the content appears to float gracefully above the background

Using Background Property Shorthand

You can bundle all of the background properties, including color into a single line of text. body {background: #fff url(bullseye.gif) scroll

center center no-repeat;}You can use one or any combination of these

properties I have found, that the order you specify them

in can make a difference