DEV Community

loading...

Discussion on: Every CSS Background Property illustrated 2021 || CSS 2021

Collapse
afif profile image
Temani Afif

(1) for background-position, you can also use the following syntax right 10px bottom 50px for example. You can specify the origin and the offset from the origin (this works in all the direction). Don't forget that we also have the center keyword. Also pay attention to the precentage values, it doesn't work the way you are showing it (or let's say, it's not clear enough if we see the figure). Here is a good article detailing all these: dev.to/afif/all-you-need-to-know-a...
(2) you are talking about gradient after talking about background-color and you are listing it as potential value of background-color. This is wrong and can be missleading as we may think that a gradient is a color that can be applied to background-color whereas it's an image and should be applied to background-image instead. You need to move the linear-gradient part when talking about image to avoid confusion. Worth to note that everything that apply to an image also apply to a gradient.
(3) I have to strongly disagree with the shorthand description you are giving because the order is not important. Simply said, there is no order and we can have any combination. If you follow the formal syntax in the MDN: developer.mozilla.org/en-US/docs/W... you will notice the use of || which means any order (developer.mozilla.org/en-US/docs/W...). The only requirement when using the shorthand is the use of background-size that must follow the background-position with / (ex: top left/100px 100x, related: stackoverflow.com/a/54055521/8620333
(4) background-size also accept percentage value and not only pixel value
(5) background-repeat accept two values (developer.mozilla.org/en-US/docs/W...) and each one-value syntax has an equivalent (even if the two-value syntax is not very common)
(6) another very important feature of background is the use of multiple background layer and you are omitting this part here. All the properties you listed accept values separated with , to define different layers.

Forem Open with the Forem app