![]() ![]() The rendered size of the background image is then computed as follows: If both components of background-size are specified and are not auto: The background image renders at the specified size. Note: This is not the currently-specified behavior, which is that the intrinsic dimensions and proportion should be those of the element in all cases. Gradients are treated as images with no intrinsic dimensions or intrinsic proportion. It also may have one or no intrinsic dimensions, and in either case it might or might not have an intrinsic proportion. ![]() A vector image may have both intrinsic dimensions (and thus must have an intrinsic proportion). A bitmap image always has intrinsic dimensions and an intrinsic proportion. The interpretation of possible values depends on the image's intrinsic dimensions (width and height) and intrinsic proportion (ratio of width and height). When the image and container have different dimensions, the image is clipped either left/right or top/bottom. The image "covers" the entire width or height of the container. Scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). cover A keyword that is the inverse of contain. The image is automatically centered unless over-ridden by another property such as background-position. When the image and container have different dimensions, the empty areas (either top/bottom of left/right) are filled with the background-color. Image is letterboxed within the container. contain A keyword that scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). ![]() auto A keyword that scales the background image in the corresponding direction such that its intrinsic proportion is maintained. ![]() If the background's attachment is fixed, the background positioning area is instead the entire area of the browser window, not including the area covered by scrollbars if they are present. The background positioning area is, by default, the area containing the content of the box and its padding the area may also be changed to just the content or to the area containing borders, padding, and content. A value that scales the background image in the corresponding dimension to the specified percentage of the background positioning area, which is determined by the value of background-origin. * Global values */ background-size: inherit īackground-size: unset Values A value that scales the background image to the specified length in the corresponding dimension. * Multiple backgrounds values by background-image */ /* Do not confuse this with background-size: auto auto */ background-size: auto, auto * Two-value syntax */ /* first value: width of the image, second value: height */ background-size: 50% auto * One-value syntax */ /* the width of the image (height set to 'auto') */ background-size: 50% Fortunately, this task can be taken care of with a few lines of CSS.Copy Code /* Keywords syntax */ background-size: cover Making a background image fully stretch out to cover the entire browser viewport is a common task in web design. And you'll also learn how to make that image responsive to your users' screen size. This tutorial will show you a simple way to code a full page background image using CSS. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |