3.9 Sizing Images: the ‘background-size’ property

Chapter 3 - Backgrounds - 3.9 Sizing Images: the ‘background-size’ property

Go to the relevant page of the specification.

background-intrinsic-001 (svg)
Background Intrinsic Sizes: No intrinsic size
A background image with no intrinsic size covers the entire padding box.
background-intrinsic-002 (svg)
Background Intrinsic Sizes: Intrinsic Width
A background image with only an intrinsic width covers its intrinsic width and the height of the padding box.
background-intrinsic-003 (svg)
Background Intrinsic Sizes: Intrinsic Height
A background image with only an intrinsic height covers its intrinsic height and the width of the padding box.
background-intrinsic-004 (may, svg)
Background Intrinsic Sizes: Intrinsic Ratio (Match Heights)
A background image with only an intrinsic ratio covers largest rectangle at that ratio that exceeds neither the height nor width of the background positioning area.
background-intrinsic-005 (may, svg)
Background Intrinsic Sizes: Intrinsic Ratio (Match Widths)
A background image with only an intrinsic ratio covers largest rectangle at that ratio that exceeds neither the height nor width of the background positioning area.
background-intrinsic-006 (svg)
Background Intrinsic Sizes: Intrinsic Percentage Width and Height
A background image with only an intrinsic ratio covers largest rectangle at that ratio that exceeds neither the height nor width of the background positioning area.
background-intrinsic-007 (svg)
Background Intrinsic Sizes: Intrinsic Width and Ratio
A missing background image height is calculated from the width and the ratio.
background-intrinsic-008 (svg)
Background Intrinsic Sizes: Intrinsic Height and Ratio
A missing background image width is calculated from the height and the ratio.
background-intrinsic-009 (svg)
Background Intrinsic Sizes: Intrinsic Width and Height (Vector)
A background with an intrinsic width and height is drawn at that size.
background-intrinsic-010 (svg)
Background Intrinsic Sizes: Intrinsic Width and Height (Raster)
A background with an intrinsic width and height is drawn at that size.
background-size-001 (dom, script)
background-size - initial and supported values
Check if background-size initial value is auto and supports values auto, cover and contain
background-size-002 (image)
background-size - initial value
Check if 'background-size' with initial value implies to the intrinsic width and height of the image are to be used. Therefore the used width and height of the background-size in this test should be 60px and 60px.
background-size-003
Value of 'auto' is used for y dimension in 'background-size'
An 'auto' value for y dimension in 'background-size' is resolved by using the image's intrinsic ratio and the size provided for the x dimension.
background-size-005 (image)
background-size - one auto keyword value
Check if 'background-size' has only one value 'auto', then such value is the width of the correspoding image and the second value (corresponding to the height of the background image) is assumed to be 'auto'. An 'auto' value for one dimension is resolved by using the image's intrinsic ratio (in this test, the image's intrinsic ratio is 1:1) and (multiplied by) the size of the other dimension. Therefore the used width and height of the background-size in this test should be 60px and 60px.
background-size-006 (image)
background-size - one value
Check if 'background-size' has only one length value, then such value is the width of the corresponding image and the second value (corresponding to the height of the background image) is assumed to be 'auto'. An 'auto' value for one dimension is resolved by using the image's intrinsic ratio (in this test, the image's intrinsic ratio is 1:1) and (multiplied by) the size of the other dimension. Therefore the used height of the background-size in this test should be 45px.
background-size-007 (image)
background-size - one value at minimum
Check if 'background-size' is '0px', minimum width of the positioning area in length, then such value is the width of the corresponding image and therefore the background image is not to be displayed.
background-size-008 (image)
background-size - one value at maximum
Check if 'background-size' is '100px', maximum width of the positioning area in length, then such value is the width of the corresponding image and the second value (corresponding to the height of the background image) is assumed to be 'auto'. An 'auto' value for one dimension is resolved by using the image's intrinsic ratio (in this test, the image's intrinsic ratio is 1:1) and (multiplied by) the size of the other dimension. Therefore the used height of the background-size in this test should be 100px.
background-size-009 (image)
background-size - one value
Check if 'background-size' has only one percentage value, then such value is the width of the corresponding image and the second value (corresponding to the height of the background image) is assumed to be 'auto'. A percentage is relative to the dimensions of the background positioning area. An 'auto' value for one dimension is resolved by using the image's intrinsic ratio (in this test, the image's intrinsic ratio is 1:1) and (multiplied by) the size of the other dimension. Therefore the used height of the background-size in this test should be 45px.
background-size-010 (image)
background-size - one value at minimum
Check if 'background-size' is '0%', minimum width of the positioning area in percentage, then such value is the width of the corresponding image and therefore the background image is not to be displayed.
background-size-011 (image)
background-size - one value at maximum
Check if 'background-size' is '100%', maximum width of the positioning area in percentage, then such value is the width of the corresponding image and the second value (corresponding to the height of the background image) is assumed to be 'auto'. An 'auto' value for one dimension is resolved by using the image's intrinsic ratio (in this test, the image's intrinsic ratio is 1:1) and (multiplied by) the size of the other dimension. Therefore the used height of the background-size in this test should be 100px.
background-size-012 (image)
background-size - two auto keyword values
Check if 'background-size' has two values 'auto', then the intrinsic width and/or height of the image should be used. Therefore the used width and height of the background-size in this test should be 60px and 60px.
background-size-013 (image)
background-size - one auto keyword and one values
Check if 'background-size' has one 'auto' and one length values, then the second value is the height of the corresponding background image and the first value (corresponding to the width of the background image) is resolved by using the image's intrinsic ratio (in this test, the image's intrinsic ratio is 1:1) and (multiplied by) the size of the other dimension. Therefore the used width of the background-size in this test should be 100px.
background-size-014 (image)
background-size - one auto keyword and one values
Check if 'background-size' has one 'auto' and one percentage values, then the second value is the height of the corresponding background image and the first value (corresponding to the width of the background image) is resolved by using the image's intrinsic ratio (in this test, the image's intrinsic ratio is 1:1) and (multiplied by) the size of the other dimension. A percentage is relative to the dimensions of the background positioning area. Therefore the used width of the background-size in this test should be 45px.
background-size-015 (image)
background-size - one and one auto keyword values
Check if 'background-size' has one length and one auto values, then the first value is the width of the corresponding background image and the second value (corresponding to the height of the background image) is resolved by using the image's intrinsic ratio (in this test, the image's intrinsic ratio is 1:1) and (multiplied by) the size of the other dimension. Therefore the used height of the background-size in this test should be 100px.
background-size-016 (image)
background-size - two values
Check if 'background-size' has two length values, then such values are the width and height of the corresponding background image. Therefore the used width and height of the background-size in this test should be 100px and 100px.
background-size-017 (image)
background-size - one and one values
Check if 'background-size' has one length and one percentage values, then such values are the width and height of the corresponding background image. Therefore the used width and height of the background-size in this test should be 45px and 45px.
background-size-018 (image)
background-size - one and one auto keyword values
Check if 'background-size' has one percentage and one auto values, then the first value is the width of the corresponding background image and the second value (corresponding to the height of the background image) is resolved by using the image's intrinsic ratio (in this test, the image's intrinsic ratio is 1:1) and (multiplied by) the size of the other dimension. Therefore the used height of the background-size in this test should be 100px.
background-size-019 (image)
background-size - one and one values
Check if 'background-size' has one percentage and one length values, then such values are the width and height of the corresponding background image. Therefore the used width and height of the background-size in this test should be 100px and 100px.
background-size-020 (image)
background-size - two values
Check if 'background-size' has two percentage values, then such values are the width and height of the corresponding background image. Therefore the used width and height of the background-size in this test should be 45px and 45px.
background-size-021 (image)
background-size '100% 100%' with background-origin 'content-box'
Check if 'background-size' is '100% 100%' that it rescales the background image independently in both dimensions to completely cover the background positioning area (it is 100px by 100px as background-origin is 'content-box'). In this test, the background-image should be scaled from 40px wide and 20px tall to become 100px by 100px.
background-size-022 (image)
background-size '50% auto' with background-origin 'border-box'
Check if 'background-size' is '50% auto', then it rescales the background image so that exactly two copies fit the background positioning area (it is 160px by 160px in this test) horizontally. Therefore the used width of the background-size in this test should be 80px.
background-size-023 (image)
background-size '50% auto' with background-clip 'padding-box'
Check if 'background-size' is '50% auto', then it rescales the background image so that exactly two copies fit the background positioning area (it is 150px by 150px in this test) horizontally. Therefore the used width of the background-size in this test should be 75px.
background-size-024 (image)
background-size '100% 100%' with background-clip 'content-box'
Check if 'background-size' is '100% 100%' that it rescales the background image independently in both dimensions to completely cover the background positioning area (it is 150px by 150px in this test), and then the background image is clipped to fit into the content area (it is 100px by 100px as background-clip is 'content-box').
background-size-025 (image)
background-size 'auto 61px' with background-repeat 'round'
Check if 'background-size' is 'auto 61px' and 'background-repeat' is 'round', then the height of the corresponding background image is rounded (70px in this test) so that it fits a whole number of times (3 in this test) in the background positioning area, and the width of the background image is rescaled (70px in this test) to keep the original aspect ratio.
background-size-026 (image)
background-size 'auto' with background-repeat 'repeat'
Check if 'background-size' is 'auto' and 'background-repeat' is 'repeat', that the background image is shown at its intrinsic size (98px wide by 99px tall in this test) and repeats in both horizontal and vertical to cover the background painting area (the same as background positioning area in this test).
background-size-027 (image)
background-size '52px auto' with background-repeat 'repeat round'
Check if 'background-size' is '52px auto' and 'background-repeat' is 'repeat round', then the width of the corresponding background image is 52px and then repeated while the height is first rescaled from 100px to 52px to keep the original image aspect ratio and then to 60px due to 'round'.
background-size-028 (image)
background-size '50px' with background-repeat 'repeat'
Check if 'background-size' is '50px' and 'background-repeat' is 'repeat', then the background image is shown with a width of 50px and its height is resolved by using the image's intrinsic ratio (in this test, the image's intrinsic ratio is 1:1) and (multiplied by) the size of the other dimension, and then it is repeated in both directions.
background-size-029 (image)
background-size '52px auto' with background-repeat 'round repeat'
Check if 'background-size' is '52px auto' and 'background-repeat' is 'round repeat', then the width is first rescaled to from 100px to 52px and then rescaled to 60px due to 'round' and the height of the corresponding background image is rescaled from 100px to 60px (to keep the original image aspect ratio) and then repeated vertically.
background-size-030 (image)
background-size '25% 25%' with background-repeat 'repeat'
Check if 'background-size' is '25% 25%' and 'background-repeat' is 'repeat', then the background image is shown with a width and height of 25% (in this test, 50px by 50px), and then it is repeated in both directions.
background-size-031 (image)
background-size '20% 30%' with background-repeat 'no-repeat round'
Check if 'background-size' is '20% 30%' and 'background-repeat' is 'no-repeat round', then the height of the corresponding background image is 50px so that it fits a whole number of times (3 in this test) in the background positioning area, and the width of the background image is rescaled to 20% (50px in this test) of the background area.
background-size-032 (image)
background-size - applies to ::first-letter pseudo-element
Check if background-size is able to apply to the ::first-letter pseudo-element.
background-size-033 (image)
background-size - applies to ::first-line pseudo-element
Check if background-size is able to apply to the ::first-line pseudo-element.
background-size-034 (image)
background-size - inherit keyword value
Check if background-size supports inherit keyword as its property value.
background-size-035
background-size conflicts with background-attachment
The test passes if we can see the background-image is exactly same as above.
background-size-applies-to-block
'Background-size' applied to element with a display of 'block'.
'Background-size' property applies to elements with 'display: block'.
background-size-aspect-ratio
Original aspect ratio of image is maintained when 'background-size: auto' and 'background-repeat: round'
If 'background-repeat' is 'round' for one dimension only and if 'background-size' is 'auto' in the other dimension, then the other dimension is sclaed so that the original aspect ratio is restored.
background-size-contain (image)
background-size:contain
The background image is scaled, while preserving its intrinsic aspect ratio (if any), to the largest size such that both its width and its height can fit inside the background positioning area.
background-size-contain-001 (image)
background-size - contain keyword value
Check if 'background-size' is 'contain' that it scales the background-image, while preserving its intrinsic aspect ratio (it is 1:1 in this test), to the largest size such that both its width and its height can fit inside the background positioning area. In this test, the background-image should be scaled to become 100px by 100px.
background-size-contain-002 (image)
background-size - contain keyword value
Check if 'background-size' is 'contain' that it scales the background-image, while preserving its intrinsic aspect ratio (it is 1:1 in this test), to the largest size such that both its width and its height can fit inside the background positioning area. In this test, the background-image should be scaled to become 100px by 100px.
background-size-cover (image)
background-size:cover
The background image is scaled, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area.
background-size-cover-001 (image)
background-size - cover keyword value
Check if 'background-size' is 'cover' that it scales the background-image, while preserving its intrinsic aspect ratio (it is 1:1 in this test), to the smallest size such that both its width and its height can completely cover the background positioning area. In this test, the background-image should be scaled to become 100px by 100px.
background-size-cover-002 (image)
background-size - cover keyword value
Check if 'background-size' is 'cover' that it scales the background-image, while preserving its intrinsic aspect ratio (it is 1:1 in this test), to the smallest size such that both its width and its height can completely cover the background positioning area. In this test, the background-image should be scaled to become 100px by 100px.
background-size-cover-contain-001 (image)
background-size - cover value and contain value
When 'background-size' is 'cover', then the background-image is scaled, while preserving its intrinsic aspect ratio (it is 1:1 in this test), to the smallest size such that both its width and its height can completely cover the background positioning area. When 'background-size' is 'contain', then the background-image is scaled, while preserving its intrinsic aspect ratio (it is 1:1 in this test), to the largest size such that both its width and its height can fit inside the background positioning area. In this test, the 2 background-images should be scaled to become 100px by 100px.
background-size-cover-contain-002 (image)
background-size - cover value and contain value
When 'background-size' is 'cover', then the background-image is scaled, while preserving its intrinsic aspect ratio (it is 1:1 in this test), to the smallest size such that both its width and its height can completely cover the background positioning area. When 'background-size' is 'contain', then the background-image is scaled, while preserving its intrinsic aspect ratio (it is 1:1 in this test), to the largest size such that both its width and its height can fit inside the background positioning area. In this test, the 2 background-images should be scaled to become 100px by 100px.
background-size-vector-001 (svg)
background-size: 16px auto; for nonpercent-width-nonpercent-height-viewbox.svg
background-size-vector-002 (svg)
background-size: 16px auto; for nonpercent-width-nonpercent-height.svg
background-size-vector-003 (svg)
background-size: 32px auto; for nonpercent-width-omitted-height-viewbox.svg
background-size-vector-004 (svg)
background-size: 16px auto; for nonpercent-width-omitted-height.svg
background-size-vector-005 (svg)
background-size: 16px auto; for nonpercent-width-percent-height-viewbox.svg
background-size-vector-006 (svg)
background-size: 16px auto; for nonpercent-width-percent-height.svg
background-size-vector-007 (svg)
background-size: 16px auto; for omitted-width-nonpercent-height-viewbox.svg
background-size-vector-008 (svg)
background-size: 16px auto; for omitted-width-nonpercent-height.svg
background-size-vector-009 (svg)
background-size: 16px auto; for omitted-width-omitted-height-viewbox.svg
background-size-vector-010 (svg)
background-size: 16px auto; for omitted-width-omitted-height.svg
background-size-vector-012 (svg)
background-size: 16px auto; for omitted-width-percent-height.svg
background-size-vector-013 (svg)
background-size: 16px auto; for percent-width-nonpercent-height-viewbox.svg
background-size-vector-014 (svg)
background-size: 16px auto; for percent-width-nonpercent-height.svg
background-size-vector-015 (svg)
background-size: 16px auto; for percent-width-omitted-height-viewbox.svg
background-size-vector-016 (svg)
background-size: 16px auto; for percent-width-omitted-height.svg
background-size-vector-017 (svg)
background-size: 16px auto; for percent-width-percent-height-viewbox.svg
background-size-vector-018 (svg)
background-size: 16px auto; for percent-width-percent-height.svg
background-size-vector-019 (svg)
background-size: auto; for nonpercent-width-nonpercent-height-viewbox.svg
background-size-vector-020 (svg)
tall background-size: auto; for nonpercent-width-nonpercent-height.svg
background-size-vector-021 (svg)
background-size: auto; for nonpercent-width-omitted-height-viewbox.svg
background-size-vector-022 (svg)
background-size: auto; for nonpercent-width-omitted-height.svg
background-size-vector-023 (svg)
background-size: auto; for nonpercent-width-percent-height-viewbox.svg
background-size-vector-024 (svg)
background-size: auto; for nonpercent-width-percent-height.svg
background-size-vector-025 (svg)
background-size: auto; for omitted-width-nonpercent-height-viewbox.svg
background-size-vector-026 (svg)
background-size: auto; for omitted-width-nonpercent-height.svg
background-size-vector-027 (svg)
background-size: auto; for omitted-width-omitted-height-viewbox.svg
background-size-vector-028 (svg)
background-size: auto; for omitted-width-omitted-height.svg
background-size-vector-029 (svg)
background-size: auto; for omitted-width-percent-height-viewbox.svg
box-shadow-003
Layering of box shadows
Shadow effects are applied front to back, where the first shadow is on the top and the last shadow is on the bottom.
css3-background-size-001
background size property
css3-background-size-contain
CSS3 background-size:contain
diagonal-percentage-vector-background (svg)
scaled vector image without intrinsic dimensions as background, with rendering dependent on the diagonal
tall--auto--omitted-width-percent-height (svg)
background-size: auto; for omitted-width-percent-height.svg
tall--auto--percent-width-nonpercent-height (svg)
background-size: auto; for percent-width-nonpercent-height.svg
tall--auto--percent-width-nonpercent-height-viewbox (svg)
background-size: auto; for percent-width-nonpercent-height-viewbox.svg
tall--auto--percent-width-omitted-height (svg)
background-size: auto; for percent-width-omitted-height.svg
tall--auto--percent-width-omitted-height-viewbox (svg)
background-size: auto; for percent-width-omitted-height-viewbox.svg
tall--auto--percent-width-percent-height (svg)
background-size: auto; for percent-width-percent-height.svg
tall--auto--percent-width-percent-height-viewbox (svg)
background-size: auto; for percent-width-percent-height-viewbox.svg
tall--auto-32px--nonpercent-width-nonpercent-height (svg)
background-size: auto 32px; for nonpercent-width-nonpercent-height.svg
tall--auto-32px--nonpercent-width-nonpercent-height-viewbox (svg)
background-size: auto 32px; for nonpercent-width-nonpercent-height-viewbox.svg
tall--auto-32px--nonpercent-width-omitted-height (svg)
background-size: auto 32px; for nonpercent-width-omitted-height.svg
tall--auto-32px--nonpercent-width-omitted-height-viewbox (svg)
background-size: auto 32px; for nonpercent-width-omitted-height-viewbox.svg
tall--auto-32px--nonpercent-width-percent-height (svg)
background-size: auto 32px; for nonpercent-width-percent-height.svg
tall--auto-32px--nonpercent-width-percent-height-viewbox (svg)
background-size: auto 32px; for nonpercent-width-percent-height-viewbox.svg
tall--auto-32px--omitted-width-nonpercent-height (svg)
background-size: auto 32px; for omitted-width-nonpercent-height.svg
tall--auto-32px--omitted-width-nonpercent-height-viewbox (svg)
background-size: auto 32px; for omitted-width-nonpercent-height-viewbox.svg
tall--auto-32px--omitted-width-omitted-height (svg)
background-size: auto 32px; for omitted-width-omitted-height.svg
tall--auto-32px--omitted-width-omitted-height-viewbox (svg)
background-size: auto 32px; for omitted-width-omitted-height-viewbox.svg
tall--auto-32px--omitted-width-percent-height (svg)
background-size: auto 32px; for omitted-width-percent-height.svg
tall--auto-32px--omitted-width-percent-height-viewbox (svg)
background-size: auto 32px; for omitted-width-percent-height-viewbox.svg
tall--auto-32px--percent-width-nonpercent-height (svg)
background-size: auto 32px; for percent-width-nonpercent-height.svg
tall--auto-32px--percent-width-nonpercent-height-viewbox (svg)
background-size: auto 32px; for percent-width-nonpercent-height-viewbox.svg
tall--auto-32px--percent-width-omitted-height (svg)
background-size: auto 32px; for percent-width-omitted-height.svg
tall--auto-32px--percent-width-omitted-height-viewbox (svg)
background-size: auto 32px; for percent-width-omitted-height-viewbox.svg
tall--auto-32px--percent-width-percent-height (svg)
background-size: auto 32px; for percent-width-percent-height.svg
tall--auto-32px--percent-width-percent-height-viewbox (svg)
background-size: auto 32px; for percent-width-percent-height-viewbox.svg
tall--contain--height (svg)
background-size: contain; for nonpercent-width-omitted-height-extreme-viewbox.svg
tall--contain--nonpercent-width-nonpercent-height (svg)
background-size: contain; for nonpercent-width-nonpercent-height.svg
tall--contain--nonpercent-width-nonpercent-height-viewbox (svg)
background-size: contain; for nonpercent-width-nonpercent-height-viewbox.svg
tall--contain--nonpercent-width-omitted-height (svg)
background-size: contain; for nonpercent-width-omitted-height.svg
tall--contain--nonpercent-width-omitted-height-viewbox (svg)
background-size: contain; for nonpercent-width-omitted-height-viewbox.svg
tall--contain--nonpercent-width-percent-height (svg)
background-size: contain; for nonpercent-width-percent-height.svg
tall--contain--nonpercent-width-percent-height-viewbox (svg)
background-size: contain; for nonpercent-width-percent-height-viewbox.svg
tall--contain--omitted-width-nonpercent-height (svg)
background-size: contain; for omitted-width-nonpercent-height.svg
tall--contain--omitted-width-nonpercent-height-viewbox (svg)
background-size: contain; for omitted-width-nonpercent-height-viewbox.svg
tall--contain--omitted-width-omitted-height (svg)
background-size: contain; for omitted-width-omitted-height.svg
tall--contain--omitted-width-omitted-height-viewbox (svg)
background-size: contain; for omitted-width-omitted-height-viewbox.svg
tall--contain--omitted-width-percent-height (svg)
background-size: contain; for omitted-width-percent-height.svg
tall--contain--omitted-width-percent-height-viewbox (svg)
background-size: contain; for omitted-width-percent-height-viewbox.svg
tall--contain--percent-width-nonpercent-height (svg)
background-size: contain; for percent-width-nonpercent-height.svg
tall--contain--percent-width-nonpercent-height-viewbox (svg)
background-size: contain; for percent-width-nonpercent-height-viewbox.svg
tall--contain--percent-width-omitted-height (svg)
background-size: contain; for percent-width-omitted-height.svg
tall--contain--percent-width-omitted-height-viewbox (svg)
background-size: contain; for percent-width-omitted-height-viewbox.svg
tall--contain--percent-width-percent-height (svg)
background-size: contain; for percent-width-percent-height.svg
tall--contain--percent-width-percent-height-viewbox (svg)
background-size: contain; for percent-width-percent-height-viewbox.svg
tall--contain--width (svg)
background-size: contain; for omitted-width-nonpercent-height-extreme-viewbox.svg
tall--cover--height (svg)
background-size: cover; for nonpercent-width-omitted-height-extreme-viewbox.svg
tall--cover--nonpercent-width-nonpercent-height (svg)
background-size: cover; for nonpercent-width-nonpercent-height.svg
tall--cover--nonpercent-width-nonpercent-height-viewbox (svg)
background-size: cover; for nonpercent-width-nonpercent-height-viewbox.svg
tall--cover--nonpercent-width-omitted-height (svg)
background-size: cover; for nonpercent-width-omitted-height.svg
tall--cover--nonpercent-width-omitted-height-viewbox (svg)
background-size: cover; for nonpercent-width-omitted-height-viewbox.svg
tall--cover--nonpercent-width-percent-height (svg)
background-size: cover; for nonpercent-width-percent-height.svg
tall--cover--nonpercent-width-percent-height-viewbox (svg)
background-size: cover; for nonpercent-width-percent-height-viewbox.svg
tall--cover--omitted-width-nonpercent-height (svg)
background-size: cover; for omitted-width-nonpercent-height.svg
tall--cover--omitted-width-nonpercent-height-viewbox (svg)
background-size: cover; for omitted-width-nonpercent-height-viewbox.svg
tall--cover--omitted-width-omitted-height (svg)
background-size: cover; for omitted-width-omitted-height.svg
tall--cover--omitted-width-omitted-height-viewbox (svg)
background-size: cover; for omitted-width-omitted-height-viewbox.svg
tall--cover--omitted-width-percent-height (svg)
background-size: cover; for omitted-width-percent-height.svg
tall--cover--omitted-width-percent-height-viewbox (svg)
background-size: cover; for omitted-width-percent-height-viewbox.svg
tall--cover--percent-width-nonpercent-height (svg)
background-size: cover; for percent-width-nonpercent-height.svg
tall--cover--percent-width-nonpercent-height-viewbox (svg)
background-size: cover; for percent-width-nonpercent-height-viewbox.svg
tall--cover--percent-width-omitted-height (svg)
background-size: cover; for percent-width-omitted-height.svg
tall--cover--percent-width-omitted-height-viewbox (svg)
background-size: cover; for percent-width-omitted-height-viewbox.svg
tall--cover--percent-width-percent-height (svg)
background-size: cover; for percent-width-percent-height.svg
tall--cover--percent-width-percent-height-viewbox (svg)
background-size: cover; for percent-width-percent-height-viewbox.svg
tall--cover--width (svg)
background-size: cover; for omitted-width-nonpercent-height-extreme-viewbox.svg
wide--12px-auto--nonpercent-width-nonpercent-height (svg)
background-size: 12px auto; for nonpercent-width-nonpercent-height.svg
wide--12px-auto--nonpercent-width-nonpercent-height-viewbox (svg)
background-size: 12px auto; for nonpercent-width-nonpercent-height-viewbox.svg
wide--12px-auto--nonpercent-width-omitted-height (svg)
background-size: 12px auto; for nonpercent-width-omitted-height.svg
wide--12px-auto--nonpercent-width-omitted-height-viewbox (svg)
background-size: 12px auto; for nonpercent-width-omitted-height-viewbox.svg
wide--12px-auto--nonpercent-width-percent-height (svg)
background-size: 12px auto; for nonpercent-width-percent-height.svg
wide--12px-auto--nonpercent-width-percent-height-viewbox (svg)
background-size: 12px auto; for nonpercent-width-percent-height-viewbox.svg
wide--12px-auto--omitted-width-nonpercent-height (svg)
background-size: 12px auto; for omitted-width-nonpercent-height.svg
wide--12px-auto--omitted-width-nonpercent-height-viewbox (svg)
background-size: 12px auto; for omitted-width-nonpercent-height-viewbox.svg
wide--12px-auto--omitted-width-omitted-height (svg)
background-size: 12px auto; for omitted-width-omitted-height.svg
wide--12px-auto--omitted-width-omitted-height-viewbox (svg)
background-size: 12px auto; for omitted-width-omitted-height-viewbox.svg
wide--12px-auto--omitted-width-percent-height (svg)
background-size: 12px auto; for omitted-width-percent-height.svg
wide--12px-auto--omitted-width-percent-height-viewbox (svg)
background-size: 12px auto; for omitted-width-percent-height-viewbox.svg
wide--12px-auto--percent-width-nonpercent-height (svg)
background-size: 12px auto; for percent-width-nonpercent-height.svg
wide--12px-auto--percent-width-nonpercent-height-viewbox (svg)
background-size: 12px auto; for percent-width-nonpercent-height-viewbox.svg
wide--12px-auto--percent-width-omitted-height (svg)
background-size: 12px auto; for percent-width-omitted-height.svg
wide--12px-auto--percent-width-omitted-height-viewbox (svg)
background-size: 12px auto; for percent-width-omitted-height-viewbox.svg
wide--12px-auto--percent-width-percent-height (svg)
background-size: 12px auto; for percent-width-percent-height.svg
wide--12px-auto--percent-width-percent-height-viewbox (svg)
background-size: 12px auto; for percent-width-percent-height-viewbox.svg
wide--auto--nonpercent-width-nonpercent-height (svg)
background-size: auto; for nonpercent-width-nonpercent-height.svg
wide--auto--nonpercent-width-nonpercent-height-viewbox (svg)
background-size: auto; for nonpercent-width-nonpercent-height-viewbox.svg
wide--auto--nonpercent-width-omitted-height (svg)
background-size: auto; for nonpercent-width-omitted-height.svg
wide--auto--nonpercent-width-omitted-height-viewbox (svg)
background-size: auto; for nonpercent-width-omitted-height-viewbox.svg
wide--auto--nonpercent-width-percent-height (svg)
background-size: auto; for nonpercent-width-percent-height.svg
wide--auto--nonpercent-width-percent-height-viewbox (svg)
background-size: auto; for nonpercent-width-percent-height-viewbox.svg
wide--auto--omitted-width-nonpercent-height (svg)
background-size: auto; for omitted-width-nonpercent-height.svg
wide--auto--omitted-width-nonpercent-height-viewbox (svg)
background-size: auto; for omitted-width-nonpercent-height-viewbox.svg
wide--auto--omitted-width-omitted-height (svg)
background-size: auto; for omitted-width-omitted-height.svg
wide--auto--omitted-width-omitted-height-viewbox (svg)
background-size: auto; for omitted-width-omitted-height-viewbox.svg
wide--auto--omitted-width-percent-height (svg)
background-size: auto; for omitted-width-percent-height.svg
wide--auto--omitted-width-percent-height-viewbox (svg)
background-size: auto; for omitted-width-percent-height-viewbox.svg
wide--auto--percent-width-nonpercent-height (svg)
background-size: auto; for percent-width-nonpercent-height.svg
wide--auto--percent-width-nonpercent-height-viewbox (svg)
background-size: auto; for percent-width-nonpercent-height-viewbox.svg
wide--auto--percent-width-omitted-height (svg)
background-size: auto; for percent-width-omitted-height.svg
wide--auto--percent-width-omitted-height-viewbox (svg)
background-size: auto; for percent-width-omitted-height-viewbox.svg
wide--auto--percent-width-percent-height (svg)
background-size: auto; for percent-width-percent-height.svg
wide--auto--percent-width-percent-height-viewbox (svg)
background-size: auto; for percent-width-percent-height-viewbox.svg
wide--auto-32px--nonpercent-width-nonpercent-height (svg)
background-size: auto 32px; for nonpercent-width-nonpercent-height.svg
wide--auto-32px--nonpercent-width-nonpercent-height-viewbox (svg)
background-size: auto 32px; for nonpercent-width-nonpercent-height-viewbox.svg
wide--auto-32px--nonpercent-width-omitted-height (svg)
background-size: auto 32px; for nonpercent-width-omitted-height.svg
wide--auto-32px--nonpercent-width-omitted-height-viewbox (svg)
background-size: auto 32px; for nonpercent-width-omitted-height-viewbox.svg
wide--auto-32px--nonpercent-width-percent-height (svg)
background-size: auto 32px; for nonpercent-width-percent-height.svg
wide--auto-32px--nonpercent-width-percent-height-viewbox (svg)
background-size: auto 32px; for nonpercent-width-percent-height-viewbox.svg
wide--auto-32px--omitted-width-nonpercent-height (svg)
background-size: auto 32px; for omitted-width-nonpercent-height.svg
wide--auto-32px--omitted-width-nonpercent-height-viewbox (svg)
background-size: auto 32px; for omitted-width-nonpercent-height-viewbox.svg
wide--auto-32px--omitted-width-omitted-height (svg)
background-size: auto 32px; for omitted-width-omitted-height.svg
wide--auto-32px--omitted-width-omitted-height-viewbox (svg)
background-size: auto 32px; for omitted-width-omitted-height-viewbox.svg
wide--auto-32px--omitted-width-percent-height (svg)
background-size: auto 32px; for omitted-width-percent-height.svg
wide--auto-32px--omitted-width-percent-height-viewbox (svg)
background-size: auto 32px; for omitted-width-percent-height-viewbox.svg
wide--auto-32px--percent-width-nonpercent-height (svg)
background-size: auto 32px; for percent-width-nonpercent-height.svg
wide--auto-32px--percent-width-nonpercent-height-viewbox (svg)
background-size: auto 32px; for percent-width-nonpercent-height-viewbox.svg
wide--auto-32px--percent-width-omitted-height (svg)
background-size: auto 32px; for percent-width-omitted-height.svg
wide--auto-32px--percent-width-omitted-height-viewbox (svg)
background-size: auto 32px; for percent-width-omitted-height-viewbox.svg
wide--auto-32px--percent-width-percent-height (svg)
background-size: auto 32px; for percent-width-percent-height.svg
wide--auto-32px--percent-width-percent-height-viewbox (svg)
background-size: auto 32px; for percent-width-percent-height-viewbox.svg
wide--contain--height (svg)
background-size: contain; for nonpercent-width-omitted-height-extreme-viewbox.svg
wide--contain--nonpercent-width-nonpercent-height (svg)
background-size: contain; for nonpercent-width-nonpercent-height.svg
wide--contain--nonpercent-width-nonpercent-height-viewbox (svg)
background-size: contain; for nonpercent-width-nonpercent-height-viewbox.svg
wide--contain--nonpercent-width-omitted-height (svg)
background-size: contain; for nonpercent-width-omitted-height.svg
wide--contain--nonpercent-width-omitted-height-viewbox (svg)
background-size: contain; for nonpercent-width-omitted-height-viewbox.svg
wide--contain--nonpercent-width-percent-height (svg)
background-size: contain; for nonpercent-width-percent-height.svg
wide--contain--nonpercent-width-percent-height-viewbox (svg)
background-size: contain; for nonpercent-width-percent-height-viewbox.svg
wide--contain--omitted-width-nonpercent-height (svg)
background-size: contain; for omitted-width-nonpercent-height.svg
wide--contain--omitted-width-nonpercent-height-viewbox (svg)
background-size: contain; for omitted-width-nonpercent-height-viewbox.svg
wide--contain--omitted-width-omitted-height (svg)
background-size: contain; for omitted-width-omitted-height.svg
wide--contain--omitted-width-omitted-height-viewbox (svg)
background-size: contain; for omitted-width-omitted-height-viewbox.svg
wide--contain--omitted-width-percent-height (svg)
background-size: contain; for omitted-width-percent-height.svg
wide--contain--omitted-width-percent-height-viewbox (svg)
background-size: contain; for omitted-width-percent-height-viewbox.svg
wide--contain--percent-width-nonpercent-height (svg)
background-size: contain; for percent-width-nonpercent-height.svg
wide--contain--percent-width-nonpercent-height-viewbox (svg)
background-size: contain; for percent-width-nonpercent-height-viewbox.svg
wide--contain--percent-width-omitted-height (svg)
background-size: contain; for percent-width-omitted-height.svg
wide--contain--percent-width-omitted-height-viewbox (svg)
background-size: contain; for percent-width-omitted-height-viewbox.svg
wide--contain--percent-width-percent-height (svg)
background-size: contain; for percent-width-percent-height.svg
wide--contain--percent-width-percent-height-viewbox (svg)
background-size: contain; for percent-width-percent-height-viewbox.svg
wide--contain--width (svg)
background-size: contain; for omitted-width-nonpercent-height-extreme-viewbox.svg
wide--cover--height (svg)
background-size: cover; for nonpercent-width-omitted-height-extreme-viewbox.svg
wide--cover--nonpercent-width-nonpercent-height (svg)
background-size: cover; for nonpercent-width-nonpercent-height.svg
wide--cover--nonpercent-width-nonpercent-height-viewbox (svg)
background-size: cover; for nonpercent-width-nonpercent-height-viewbox.svg
wide--cover--nonpercent-width-omitted-height (svg)
background-size: cover; for nonpercent-width-omitted-height.svg
wide--cover--nonpercent-width-omitted-height-viewbox (svg)
background-size: cover; for nonpercent-width-omitted-height-viewbox.svg
wide--cover--nonpercent-width-percent-height (svg)
background-size: cover; for nonpercent-width-percent-height.svg
wide--cover--nonpercent-width-percent-height-viewbox (svg)
background-size: cover; for nonpercent-width-percent-height-viewbox.svg
wide--cover--omitted-width-nonpercent-height (svg)
background-size: cover; for omitted-width-nonpercent-height.svg
wide--cover--omitted-width-nonpercent-height-viewbox (svg)
background-size: cover; for omitted-width-nonpercent-height-viewbox.svg
wide--cover--omitted-width-omitted-height (svg)
background-size: cover; for omitted-width-omitted-height.svg
wide--cover--omitted-width-omitted-height-viewbox (svg)
background-size: cover; for omitted-width-omitted-height-viewbox.svg
wide--cover--omitted-width-percent-height (svg)
background-size: cover; for omitted-width-percent-height.svg
wide--cover--omitted-width-percent-height-viewbox (svg)
background-size: cover; for omitted-width-percent-height-viewbox.svg
wide--cover--percent-width-nonpercent-height (svg)
background-size: cover; for percent-width-nonpercent-height.svg
wide--cover--percent-width-nonpercent-height-viewbox (svg)
background-size: cover; for percent-width-nonpercent-height-viewbox.svg
wide--cover--percent-width-omitted-height (svg)
background-size: cover; for percent-width-omitted-height.svg
wide--cover--percent-width-omitted-height-viewbox (svg)
background-size: cover; for percent-width-omitted-height-viewbox.svg
wide--cover--percent-width-percent-height (svg)
background-size: cover; for percent-width-percent-height.svg
wide--cover--percent-width-percent-height-viewbox (svg)
background-size: cover; for percent-width-percent-height-viewbox.svg
wide--cover--width (svg)
background-size: cover; for omitted-width-nonpercent-height-extreme-viewbox.svg
zero-height-ratio-5px-auto (svg)
zero height ratio, 5px auto
zero-height-ratio-auto-5px (svg)
zero height ratio, auto 5px
zero-height-ratio-auto-auto (svg)
zero height ratio, auto auto
zero-height-ratio-contain (svg)
zero height ratio, contain
zero-height-ratio-cover (svg)
zero height ratio, cover
zero-ratio-no-dimensions-5px-auto (svg)
zero ratio, no dimensions, 5px auto
zero-ratio-no-dimensions-auto-5px (svg)
zero ratio, no dimensions, auto 5px
zero-ratio-no-dimensions-auto-auto (svg)
zero ratio, no dimensions, auto auto
zero-ratio-no-dimensions-contain (svg)
zero ratio, no dimensions, contain
zero-ratio-no-dimensions-cover (svg)
zero ratio, no dimensions, cover
zero-width-ratio-5px-auto (svg)
zero height ratio, 5px auto
zero-width-ratio-auto-5px (svg)
zero height ratio, auto 5px
zero-width-ratio-auto-auto (svg)
zero width ratio, auto auto
zero-width-ratio-contain (svg)
zero width ratio, contain
zero-width-ratio-cover (svg)
zero width ratio, cover