If "auto" the image is scaled proportionally according to the dimensions of the original image. The second value is auto or the height of the image specified as a percentage of the div's vertical dimension.
The first value is either "auto" or the width of the image specified as a percentage of the div's horizontal dimension. In this case, a percentage is specified instead of pixel size.Īs with the pixel size, the background-size property takes one or two values: The CSS property background-size is also used here, like it is with the static-sized background image.
KEYLIGHT 1.2 WHITE BACKGROUND CODE
Therefore, only the source code of the first div is here: Only the specified height is different for the second div. There's no content in these example divs to better demonstrate the size of their background images. The two examples demonstrate the background image automatically resized according to the size of the div it's in. The image is specified to be 85% of the height of the div. These examples demonstrate the first of several responsive site-friendly CSS rules for resizing background images. In the example, the values are "40px" and "60px" ( colored blue), which causes the image to be 40 pixels wide and 60 pixels high. If the second value is missing for a static size specified in pixels, it's assumed to be "auto" with the image scaled proportionally according to the original image dimensions. The second value is the vertical position. The first value is the horizontal position. The CSS property background-size specifies the size of the background-image. If the the background-position property contains only one value, it's assumed to be the horizontal position value and the vertical postion is assumed to be "center".Īs a demonstration of what can be done, this background image is resized to 40圆0 pixels. a vertical pixel position within the div measured from the left edge (50px is 50 pixels down from the top).a percentage of the height of the div (25% is a quarter of the way down from the top), or.a horizontal pixel position within the div measured from the left edge (50px is 50 pixels from the left edge).a percentage of the width of the div (25% is a quarter of the way in from the left), or.In the example, both values are "center" ( colored blue), which causes the image to be centered both horizontally and vertically. The CSS property background-position specifies the position of the background-image. This next example has the background image horizontally tiled, repeated along the top of the div. Unless there's something unusual about the content, it won't be mentioned again in the example notes. Some of the examples have content, some don't. The content of the div is an h1 tag with "The Willmaster Logo." Because the background image threatened to overpower the words, I used a span tag to specify a white background for the words of the content. The CSS property is background-image and its value is url(.), the "." replaced with the URL of the image. The second line of the CSS style is where the fun is at. This will be fairly consistent for all the examples and won't be mentioned again in example notes. The first line of the CSS style specifies the div's height, width, and border. (Background image tiling or repetition is default.) For live public pages, you would generally have the style in a CSS style tag or import it from an external CSS file. GIF, JPG, and PNG images can be used for background images. Those are indicated within the sections where they are described.īackground images can be tiled, positioned in a specific location, stretched to fill the entire div and, for responsive sites, automatically sized relative to the size of the div. Three of the nine CSS rules are for responsive sites, automatically resizing background images. Depending on the type of website, navigation buttons may be put in a div with a scenic background. An ad may be presented over a muted graph or a logo. Some content may benefit from an underlying background image.Ī poem over a textured background, for example, or an image of a watercolor painting. Any divs on a page can have their own background image.ĭiv content is on top of the div's background image like web page content is on top of its background image. With a div, the background image is constrained within the div. 3 of the 9 CSS rules are for responsive sites, automatically resizing background images.
0 kommentar(er)
