Their order is exactly like that of the pixels values, x-axis value first, and y-axis value second, as so: background-position: top right The background-position property also works with other values, keywords and percentages, which can be useful, especially when an element’s size is not set in pixels. The image can be set to any position you like. * Example 3: move the image to the left. * Example 2: move the image to the right. The first digit is the x-axis position (horizontal) and the second is the y-axis position (vertical). We have also set background-repeat to no-repeat. In the examples below, we have set a background image and are using the background-position property to control it. The trick with background-position is that you are actually specifying where the top-left corner of the image will be positioned, relative to the top-left corner of the element. The background-position property controls where a background image is located in an element. along the y-axis) */īackground-repeat: inherit /* Uses the same background-repeat property of the element's parent. along the x-axis) */īackground-repeat: repeat-y /* Tiles vertically (i.e. */īackground-repeat: repeat-x /* Tiles horizontally (i.e. */īackground-repeat: no-repeat /* No tiling. The possible values (and their results) are as follows: background-repeat: repeat /* The default value. This may be what you want, but sometimes you want an image to be displayed only once or to be tiled in only one direction. So, in the following snippet, the image is in the same directory as the style sheet: background-image: url(image.jpg) īut if the image was in a sub-folder named images, then it would be: background-image: url(images/image.jpg) īy default, when you set an image, the image is repeated both horizontally and vertically until the entire element is filled. Just remember that the path is relative to the style sheet. This can be used in conjunction with background-color, so if your image is not tiled, then any space that the image doesn’t cover will be set to the background color. The background-image property allows you to specify an image to be displayed in the background. The background-color property can also be set to transparent, which makes any elements underneath it visible instead. The follow commands all have the same output: background-color: blue There are a number of ways to specify the color. The background-color property fills the background with a solid color. But in IE7 and IE6 the background does not include the border, as illustrated below.īackground does not extend to the borders in IE7 and IE6. This works as it should in Firefox, Safari and Opera, and now in IE8. One important thing to note is that the background accounts for the contents of the element, including the padding and border. These properties can all be merged into one short-hand property: background.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |