background-repeat: rewrite #33534
background-repeat: rewrite #33534
Conversation
github-actions
bot
added
Content:CSS
|
Preview URLs Flaws (3)URL:
(comment last updated: 2024-05-13 17:12:21) |
| By default, the repeated images are clipped to the size of the element, but they can be scaled to fit (using `round`) or evenly distributed from end to end (using `space`). | ||
| ## Description | ||
|
|
||
| The property accepts two `<repeat-style>` keyterms, or one keyterm as a shorthand for the two values. When two values are provided, the first value defines the horizontal repetition behavior and the second value defines the vertical behavior. |
There was a problem hiding this comment.
Do we define "keyterm" anywhere? It might be nice to explain that.
|
|
||
| The property accepts two `<repeat-style>` keyterms, or one keyterm as a shorthand for the two values. When two values are provided, the first value defines the horizontal repetition behavior and the second value defines the vertical behavior. | ||
|
|
||
| The default value is `repeat repeat`. By default, the background image maintains its intrinsic {{glossary("aspect ratio")}}, repeating both horizontally and vertically to cover the entire background paint area, with edge images being clipped to the size of the element. Property values can be used to repeat only horizontally, vertically, or not at all. |
There was a problem hiding this comment.
Property values can be used to repeat only horizontally, vertically, or not at all.
Does this mean 'a background image can be repeated either horizontally or vertically'?
|
|
||
| The default value is `repeat repeat`. By default, the background image maintains its intrinsic {{glossary("aspect ratio")}}, repeating both horizontally and vertically to cover the entire background paint area, with edge images being clipped to the size of the element. Property values can be used to repeat only horizontally, vertically, or not at all. | ||
|
|
||
| The repeating images can be evenly spaced apart, ensuring it maintains its aspect ratio without being clipped, with the `space` value. When space is used, if the background paint area has a different aspect ratio than the image or does not otherwise have a size that a multiple of the background size in both directions, there will be areas not covered by the background image. |
There was a problem hiding this comment.
Can we link to 'paint area' if that's described in more detail somewhere?
|
|
||
| The repeating images can be evenly spaced apart, ensuring it maintains its aspect ratio without being clipped, with the `space` value. When space is used, if the background paint area has a different aspect ratio than the image or does not otherwise have a size that a multiple of the background size in both directions, there will be areas not covered by the background image. | ||
|
|
||
| Alternatively, the repeated background image can be scaled to cover the entire area without clipping, by setting the `round` value. This value by lead the background image to be stretched if the aspect ratio of the background image is not the same as the paint area's aspect ratio. With `round`, the repeated images will stretch to fill all the available space until there is room to add an additional repeated image. When an additional image is able to fit. For example, if an image has a width of `100px`, the image will be repeated 10 times in the horizontal direction when the container is 1000px to 1099px wide, with the image being stretch to 109.9px wide. If the width of the container increases by 1px, to be 1100px wide, an 11th image will fit, with all the images being 100px wide again. |
There was a problem hiding this comment.
There's a sentence fragment at:
additional repeated image. When an additional image is able to fit.There was a problem hiding this comment.
if an image has a width of
100px, the image will be repeated 10 times in the horizontal direction when the container is 1000px to 1099px wide, with the image being stretch to 109.9px wide.
I'm not sure I follow this; if the container width is between 1000px and 1100px, then the repeated image will be 100px (at 1000px container width), then stretched until 11 fit at 100px each again (at 1100px container width)?
|
General question after having a read through: what's the starting point of images? Is it top-left 0,0 of an element's position or is there anything else that affects this (directionality / margins etc.) |
|
Thanks a lot, @estelle! Looking good, mostly some open questions on some concepts I wasn't sure about! |
Co-authored-by: Brian Thomas Smith <brian@smith.berlin>
rewrote to match standard way of writing css property pages.
added description.
removed table of values, converting to definition list
round was explained incorrectly. This has been fixed (images don't get squashed, just stretched)
(the guide in the see also that may be a "broken link" is going to be added to the site when #33461 is merged.)