![]() ![]() If the image doesn't take up the entire area of the page, The entire area of the page or just be used to frame the contentĪrea. Large size background images may either be stretched to fit That the technique makes use of a single, large size image that is not Large size background image is different from a tiled background in The background below is made up of the singleġ00px by 100px image that is shown above. This image can then be repeated in both the x and y directions to coverĪ larger area. Size, but when it is repeated both horizontally and vertically itĪppears to be a single large image that fills the entire area.īelow is an example of an image designed to be used as a tiled Using a tiled background image, the actual image may only be 75px in It can repeat seamlessly both horizontally and vertically. To the W3C Schools page on background size to see how theĭifferent options for setting background-size can be applied.Ī tiled background image is a small size image that is designed so that Stretch the image to fill up the entire area of the element. ![]() Helpful when using large size web background images where you want to The options for setting background size are In CSS 3.0 it is now possible to set the background-sizeĪs well. The different options for setting background-position can be applied. Go to the W3C Schools page on background position to see how Options for setting the vertical position are Options for setting the horizontal position are left, You can set both the horizontal and vertical The background image will be placed inside of the element it is theīackground for. The background-position property specifies the initial position where The user slides the scroll-bar in the browser or whether the image will Image will scroll along with the rest of the elements on the page when The background-attachment property specifies whether the background The different options for setting background-repeat can be applied. Go to the W3C Schools page on background repeat to see how This property is for the image to repeat both horizontally and If you do not want the background image to repeat, youĬan define no-repeat. Image to repeat along the x axis (horizontally) by defining repeat-x orįor the image to repeat along the y access (vertically) by defining Will repeatedly display until it fills up the entire area of theĮlement the background is being applied to or if the background image The background-repeat property specifies whether the background image Once a background image has been defined, there are a number of ways that you can modify how that image is displayed. The following example shows how to apply the background-image property: While you can accomplish some very nice designs using just colors, sometimes you may want the added design options and flexibility that using images can provide. To modifying the background color of any element, you can also define an image to be used as a background using the background-image property. In the earlier lesson on Applying Color in CSS, you used the background-color property to implement a color scheme for your portfolio page. design or locate background images, both tiled and large size, for use as web backgrounds.utilize the CSS position, repeat, size and attachment properties of the background image to control how the image is displayed.utilize the CSS background-image property to apply a background image to an element on the page.Images, and learn how to use CSS to apply both types as the backgroundĪt the completion of this exercise, you will be able to: You willĮxplore at two types of background images, tiled images and large size Way to further customize the design of your web site. In this lesson, you will learn how to use background images as a Lists Unordered Lists Ordered Lists Other Lists HTML Block & Inline HTML Classes HTML Id HTML Iframes HTML JavaScript HTML File Paths HTML Head HTML Layout HTML Responsive HTML Computercode HTML Semantics HTML Style Guide HTML Entities HTML Symbols HTML Emojis HTML Charset HTML URL Encode HTML vs.UNIT 4 > MODULE 4 Lesson 3: Background Images Overview ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |