using the properties of background you can set the color, position, image, snap, and repeatability of the background for a single item, and for the entire site. The latter, in fact, the configuration tasks for the tag body.Consider all the properties associated with the background (background). If you are just learning, then the best option for learning the lesson will be the practical application of the properties in the same manner as I consider the following:
Background-Color - sets the background color. Can be applied to individual elements <h1>, <p> or the entire site through a tag <body>:
/ * The black background of the site * /
body {
Background-Color : # 000 ;
}
/ * Header black background, white font * /
H1 {
Color : # FFF ;
Background-Color : # 000 ;
}
Background-Image - used to insert a background image, while in the css specify the URL for the image:
body {Notice how the path to the image - this means that it must be in the same folder as the css stylesheet.Otherwise, you must specify the correct path to the image.
Background-Color : # 000 ;
Background-Image : url ( "My-image.jpg" ) ;
}
Background-repeat - is used in the previous example, the image will be "replicated" (again) across the screen. This property is intended to manage this process. There are several valid values:
- background-repeat: repeat-x - the image is repeated horizontally only
- background-repeat: repeat-y - the image is repeated vertically only
- background-repeat: repeat - repeat an image horizontally and vertically
- background-repeat: no-repeat - the image is not repeated
Background-Attachment - This property determines whether the background image is fixed when you scroll the page:
- background-attachment: scroll - scrolls with the page
- background-attachment: fixed - when scrolling the background remains stationary
Background-position - specifies the location of the picture relative to the screen, by default it is displayed in the upper left corner. This property is a set of coordinates x (horizontal) and Y (vertical), which nachinayutsya from the upper left corner. Can be specified:
- in fixed units (pixels, centimeters)
- Percentage
- verbally: - top (top), bottom (bottom), center (center), left (left) and right (right).
- background-position: 20px 50px - the image recedes down to 20 pixels from the top and left for 50 from the left edge.
- background-position: 50% 25% - is located in the center of the horizontal and receding to 25% on top.
- background-position: right bottom - the bottom picture is on the right.
[Background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]
For example:
Background : # 000 url ( "My-image.jpg" ) no-repeat fixed left bottom ;If any property is omitted, its value is set by default.
I hope this tutorial was useful to you, subscribe to the blog updates via RSS, then you expect a lot of interesting secrets!
0 comments:
Post a Comment