![]() CSS cascades from the top of a file to the bottom of a file thus, we can use two background-color properties within a single rule set. If Internet Explorer 8 support is a concern, fortunately there is an easy way to provide a fallback background. And when a browser such as Internet Explorer 8 comes across a value it doesn’t recognize, it will ignore it. Browser support is specifically a problem with Internet Explorer 8, where RGBa and HSLa values are not supported. ![]() When using an RGBa or HSLa value as a transparent background color, it’s a good idea to provide a fallback color, too, because not all browsers recognize RGBa or HSLa values. Most commonly we’ll see hexadecimal values however, we may occasionally want to use RGBa or HSLa values for transparencies. As with other color values, we can pick from keywords, hexadecimal codes, and RGB, RGBa, HSL, and HSLa values. When adding a background color, we have a few options for the values we can use. Either property will work, and which one you decide to use depends on your preference as well as the case for which you’re using it. The background property accepts colors and images in shorthand form, while the background-color property is used strictly for setting solid background colors. The quickest way to add a background to an element is to add a single-color background using the background or background-color property. In this lesson we’re going to take a look at how to assign different types of backgrounds, including gradients, to elements we’ll also play around with a handful of CSS3 properties specific to backgrounds. As we decide how to implement these backgrounds, we should keep in mind that every background contributes to the overall appearance of our website. Within CSS, element backgrounds can be a solid color, an image, a gradient, or a combination of these. They help create a site’s look and feel, establish groupings, and assign priority, and they have a considerable influence on a website’s usability. background-position: 20% 60% : Positions the background 20% horizontally from the left side, and 60% vertically from the top.Backgrounds have a significant impact on the design of a website.You can also specify the pixels as percentages. background-position: top 20px right 10px : Aligns to the top with a 20px offset, and the right with a 10px offset.background-position: center bottom : Aligns to the center and the bottom of the element.background-position: right top : Aligns to the right side and the top of the element.background-position: right : Aligns to the right side of the element.background-position: left : Aligns to the left side of the element.background-position: bottom : Aligns to the bottom of the element.background-position: top : Aligns to the top of the element.background-position: center : Centers the background image.If you don't specify a vertical value, the default will always be 50%. You can specify two values for background-position-the first is always the horizontal value. This property will help you position your background image relative to the container, which could be the page (if used in the body tag), or any other container. Use the background-position property to align a background. You can also specify length and width in percentages.However, length is optional-if you only enter the width, the height will automatically scale without stretching or warping. The first measurement is width, and the second is height. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |