Skip to content
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

Merged
merged 3 commits into from Apr 18, 2024
Merged

update learn background and borders #33143

merged 3 commits into from Apr 18, 2024

Conversation

estelle
Copy link
Member

@estelle estelle commented Apr 17, 2024

add features supported since this was written a LONG time ago.
link more stuff to internal resources

add features supported since this was written a LONG time ago.
@estelle estelle requested a review from a team as a code owner April 17, 2024 20:39
@estelle estelle requested review from chrisdavidmills and removed request for a team April 17, 2024 20:39
@github-actions github-actions bot added Content:Learn:CSS Learning area CSS docs size/s 6-50 LoC changed labels Apr 17, 2024
Copy link
Contributor

github-actions bot commented Apr 17, 2024

Preview URLs

External URLs (1)

URL: /en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders
Title: Backgrounds and borders

(comment last updated: 2024-04-18 16:39:11)

Copy link
Contributor

@chrisdavidmills chrisdavidmills left a 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.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
- `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
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
- `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.
Copy link
Contributor

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?

@estelle estelle merged commit 29782e5 into main Apr 18, 2024
9 checks passed
@estelle estelle deleted the estelle-patch-1 branch April 18, 2024 16:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Content:Learn:CSS Learning area CSS docs size/s 6-50 LoC changed
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants