1 / 15

Chapter 8

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

manon
Download Presentation

Chapter 8

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Chapter 8 Adding Graphics to Web Pages

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

  3. 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);

  4. Paths • An images path (location) is very important • url(../images/bg.gif) /*document-relative */ • url (/Images/bg.gif) /*root-relative */ images folder home page 2 1 styles folder

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

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

  7. Precise Values • 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. 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.

  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% 0% 80% 20% 50% 50% 100% 100%

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

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

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

  15. Using Background Property Shorthand • You can bundle all of the background properties, including color into a single line of text. • body {background: #fffurl(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

More Related