New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
update learn background and borders #33143
Conversation
add features supported since this was written a LONG time ago.
Preview URLs External URLs (1)URL:
(comment last updated: 2024-04-18 16:39:11) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looking good, nice work @estelle! Just a couple of small bits for you to consider, so approving.
@@ -81,6 +81,8 @@ The {{cssxref("background-repeat")}} property is used to control the tiling beha | |||
- `repeat-x` — repeat horizontally. | |||
- `repeat-y` — repeat vertically. | |||
- `repeat` — the default; repeat in both directions. | |||
- `space` — repeat as many times as possible, adding space between the images if there is extra space. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
- `space` — repeat as many times as possible, adding space between the images if there is extra space. | |
- `space` — repeat as many times as possible, adding space between the images if there is extra space to fill. |
@@ -81,6 +81,8 @@ The {{cssxref("background-repeat")}} property is used to control the tiling beha | |||
- `repeat-x` — repeat horizontally. | |||
- `repeat-y` — repeat vertically. | |||
- `repeat` — the default; repeat in both directions. | |||
- `space` — repeat as many times as possible, adding space between the images if there is extra space. | |||
- `round` — similar to `space`, but stretches the image to fill any extra space |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
- `round` — similar to `space`, but stretches the image to fill any extra space | |
- `round` — similar to `space`, but stretches the images to fill any extra space. |
@@ -163,7 +165,7 @@ Finally, you can also use a 4-value syntax in order to indicate a distance from | |||
|
|||
A gradient — when used for a background — acts just like an image and is also set by using the {{cssxref("background-image")}} property. | |||
|
|||
You can read more about the different types of gradients and things you can do with them on the MDN page for the [`<gradient>`](/en-US/docs/Web/CSS/gradient) data type. A fun way to play with gradients is to use one of the many CSS Gradient Generators available on the web, such as [this one](https://cssgradient.io/). You can create a gradient then copy and paste out the source code that generates it. | |||
You can read more about the six different types of gradients and things you can do with them on the MDN page for the [`<gradient>`](/en-US/docs/Web/CSS/gradient) data type. A fun way to play with gradients is to use one of the many CSS Gradient Generators available on the web, such as [CSSGradient.io](https://cssgradient.io/). You can create a gradient then copy and paste out the source code that generates it. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Add "six" here doesn't seem necessary — just makes it less future proof?
add features supported since this was written a LONG time ago.
link more stuff to internal resources