![]() 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. background-attachment: determines whether the image scrolls with the page.background-repeat: determines whether the image is tiled.background-position: specifies where to place the image in the element’s background.background-image: calls an image for the background.background-color: specifies the solid color to fill the background with.We have five main background properties to use in CSS 2. Working With Background in CSS 2 Overview CSS: Innovative Techniques and Practical Solutions.Backgrounds In Web Design: Examples And Best Practices.Transparent Background, Positioning Problem.Simple Responsive Images With CSS Background Images.You may also want to check out the following Smashing Magazine articles: We’ll show some common tricks that can be done with the background as well as what’s in store for background in CSS 3 (including four new background properties!). We will cover the basics of using CSS backgrounds, including properties such as background-attachment. The CSS Background is one of the fundamentals that you simply need to know. We’ll show some common tricks that can be done with the background as well as what’s in store for backgrounds in CSS 3 (including four new background properties!). In this article, we will cover the basics of using CSS backgrounds, including properties such as background-attachment. They are one of the fundamentals that you simply need to know.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |