css background image resize browser window

CSS BACKGROUND IMAGE RESIZE BROWSER WINDOW CODE

The same background image has been used for each example, the image’s original dimensions are 550px (w) x 250px (h). Let’s take a look at a few of examples, firstly using the contain keyword. As such, again depending on whether or not the proportions of the background image match those of the background positioning area, some parts of the background image may not be in view within the background positioning area.

both the images width or height are equal to or exceed the background positioning area. If the cover keyword is the used, the background image is scaled, again preserving the image’s original proportions / aspect ratio, this time to be as large as possible so that the background positioning area is completely covered by the background image, ie. As such, depending on whether or not the proportions of the background image match those of the background positioning area, there may be some areas of the background which are not covered by the background image. neither the image’s width or height exceed the background positioning area.

If the contain keyword is used, the background image is scaled, while preserving the image’s original proportions / aspect ratio, so as to be as large as possible providing that it is contained within the background positioning area, ie. The two other possible values for background size are the keywords contain and cover. Specifying the Background Size using ‘contain’ or ‘cover’

CSS BACKGROUND IMAGE RESIZE BROWSER WINDOW CODE

In all examples the background image has been defined so as not to repeat, and the following code is assumed in addition to that shown for each example: The same background image is used in all of the examples below, it’s original dimensions are 550px width x 250px height. Let’s take a look at a few examples to demonstrate this. Where both values are auto, the image is shown at its original size. If background-size is not specified, the default value is auto for both width and height. Where one value is a defined length or percentage and the other value is auto, the background image will be scaled according to the specified length or percentage in such a manner that its intrisic proportions (ratio) are maintained. The auto keyword can be used in place of either value, and if only one value (length/percentage/ auto) is supplied for background-size, this will be treated as the width, and the height will be assumed to be auto. the space available for the background), not the width/height of the background image itself. Note: when percentages are used, these relate to the width/height of the ‘background positioning area’ of the containing element (ie. For each background image, two lengths or percentages can be supplied – the first relating to the width of the background image, the second relating to the height. Specifying the background size using lengths and percentages does exactly what you’d expect.

Specifying the Background Size using Lengths, Percentages or ‘auto’

Css background image resize browser window