tailieunhanh - Learning Web Design Third Edition- P27

Learning Web Design Third Edition- P27:Everything you need to know to create professional web sites is right here. Learning Web Design starts from the beginning defining how the Web and web pages work and builds from there. By the end of the book, you'll have the skills to create multi-column CSS layouts with optimized graphic files, and you'll know how to get your pages up on the Web. | Background Images AT A GLANCE The properties related to background images are background-image background-repeat background-position background-attachment background Background Images CSS really beats X HTML hands-down when it comes to background images but then X HTML really shouldn t have been dealing in background images in the first place . With CSS you re not stuck with a repeating tile pattern and you can position a background image wherever you like. You can also apply a background image to any element in the document not just the whole page. In this section we ll look at the collection of properties used to place and push around background images starting with the basic background-image property. Adding a background image The background-image property is used to add a background image to an element. Its primary job is to provide the location of the image file. background-image Values Default URL location of image none inherit none Applies to all elements Inherits no NOTE The proper term for that url-holder is a functional notation. It is the same syntax used to list decimal and percentage RGB values. The value of background-image is a sort of url-holder that contains the URL of the image. The URL is relative to the X HTML document that the image is going into not the style sheet document see related Tip . These examples and Figure 13-14 show background images applied behind a whole page body and a single blockquote element with padding and a border applied. body background-image url blockquote background-image url padding 2em border 4px dashed TIP Providing site root relative URLs for images ensures that the background image can be found regardless of location of the X HTML document it s going into. The root directory is indicated by a slash at the beginning of the URL. For example background-image url images Here you can see the default behavior of background-image. The image starts in the top left-hand corner and tiles .