This syntax is important to the browser understanding that you mean to indicate a location. Note that the path is prefaced with they keyword url and wrapped in parenthesis. Set the background-image by showing the browser where to find the image, using the URL. Indicates the path or URL of the background image. ![]() Valid values include a colour value, transparent, or inherit. ![]() Many color picker tools will help you find the hexadecimal notation of a given color. The first pair indicates the red levels, and the second and third indicate the green and blue levels respectively- #RRGGBB. Most people use hexadecimal notation, a pound/hash symbol (#) followed by six characters. There are several ways to indicate background-color, including RGB values and keywords. Sets the background color of the HTML element. In this article, you will go through CSS background images in detail, building an alert message as an example, step by step.įirst, review the different properties you can use. Using these properties, such as position and color, you can begin to control the look and feel of your page. The CSS for backgrounds is split into several different properties. You will see how to apply a background image via CSS, adjust its placement, tile it vertically or horizontally and combine background images using CSS Sprites to improve site performance. In this article, you will learn the basics of how CSS background images work. Depending on the size of your site, this can be a substantial time savings. You can update your entire site by changing only the style sheet, rather than recoding every HTML page. Redesigns and other transitions, in the life of sites built with modern methods, can then be completed much more efficiently. Previously, authors (like you!) were forced to fill their code with img tags to achieve the same effect.ĬSS and in particular the background property keep your HTML free from presentational clutter. The CSS background image is among the most important tools you have at your disposal, because it lets you apply decorative images to particular parts of your HTML without adding any extra weight to your HTML. Maybe you even skipped ahead to this section?īackground images are all about making your site look stunning, but you might be surprised how closely they build upon the fundamental concepts you have already learned.Īs you previously learned from an earlier article in this series, one of the most important changes that comes with CSS is the ability to separate presentation, or the way things look, from semantics, or what things mean. ![]() IntroductionĪdmit it! Since the first article in the Web Standards Curriculum, you’ve been excited to learn how to make your site look fierce and fabulous. Near the end, it also looks at advanced techniques such as CSS sprites. This article covers CSS backgrounds in detail: background color, image, repeat, attachment, and position.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |