1. Adding Graphics to Web Pages

2. 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.

3. Check out Zen Garden for the power of background imagesZen Garden 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);

4. An 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

5. 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

6. 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; }

7. You can position images using pixels or ems You 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)

8. 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

9. 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.

10. 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%;

11. 0% 100% 50% 80% 20%

12. 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.

13. 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; }

15. 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