From 594ebd066be9d761d5dab6f150aa9b99a07ac9fd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Giftea=20=E2=98=95?= Date: Tue, 14 Oct 2025 21:48:21 +0100 Subject: [PATCH] feat(curriculum): Add interactive examples to background images lesson (#62814) --- .../672aa669960f6a596081fcad.md | 168 ++++++++++++------ 1 file changed, 111 insertions(+), 57 deletions(-) diff --git a/curriculum/challenges/english/blocks/lecture-working-with-backgrounds-and-borders/672aa669960f6a596081fcad.md b/curriculum/challenges/english/blocks/lecture-working-with-backgrounds-and-borders/672aa669960f6a596081fcad.md index 379950bfd32..e024a956f27 100644 --- a/curriculum/challenges/english/blocks/lecture-working-with-backgrounds-and-borders/672aa669960f6a596081fcad.md +++ b/curriculum/challenges/english/blocks/lecture-working-with-backgrounds-and-borders/672aa669960f6a596081fcad.md @@ -5,7 +5,7 @@ challengeType: 19 dashedName: how-to-work-with-background-image-size-repeat-position-and-attachment --- -# --description-- +# --interactive-- When working with background images in CSS, you have several properties at your disposal to control how these images are displayed. @@ -13,12 +13,18 @@ The main properties we'll focus on are `background-size`, `background-repeat`, ` Let’s first take a look at the `background-image` property: -```css -body { - background-image: url("https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg"); -} +:::interactive_editor + +```html + ``` +::: + The above CSS sets a cat background image for the `body` element. If you want to set the size for the background image, you can use the `background-size` property. @@ -27,81 +33,117 @@ You can use `contain` to scale the image as large as possible without cropping o Here's an example with `background-size: contain`: -```css -body { - background-image: url("https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg"); - background-size: contain; - min-height: 100px; -} +:::interactive_editor + +```html + ``` +::: + We are setting the `min-height` to `100px` so the background image is visible and the layout maintains a baseline height, ensuring that even with minimal content, the design appears balanced and visually appealing. If we change the `background-size` property to use the `cover` value, then the background image will scale to cover the entire `body` element while maintaining its aspect ratio. -```css -body { - background-image: url("https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg"); - background-size: cover; - min-height: 100px; -} +:::interactive_editor + +```html + ``` +::: + In the previous examples, you probably noticed that the background image would continuously repeat. By default, background images repeat both horizontally and vertically to fill the entire element. However, you can control this behavior. You can use the `background-repeat` property with the value set to `no-repeat`. -```css -body { - background-image: url("https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg"); - background-size: contain; - background-repeat: no-repeat; - min-height: 100px; -} +:::interactive_editor + +```html + ``` +::: + With the `background-size` set to `contain` and the `background-repeat` set to `no-repeat`, the image will no longer repeat on the screen. If you wanted to repeat the background image horizontally, you can use the `repeat-x` value for the `background-repeat` property. -```css -body { - background-image: url("https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg"); - background-size: contain; - background-repeat: repeat-x; - min-height: 100px; -} +:::interactive_editor + +```html + ``` +::: + If you wanted to repeat the background image vertically, you can use the `repeat-y` value for the `background-repeat` property. -```css -body { - background-image: url("https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg"); - background-size: contain; - background-repeat: repeat-y; - min-height: 100px; -} +:::interactive_editor + +```html + ``` +::: + To position a background image on the screen, you can use the `background-position` property. The `background-position` property allows you to set where in the element the background image appears. You can use keywords like `top`, `bottom`, `left`, `right`, and `center`, or specific pixel or percentage values. Here is an example using the `center` and `top` for the `background-position`: -```css -body { - background-image: url("https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg"); - background-size: contain; - background-repeat: no-repeat; - background-position: center top; - min-height: 100px; -} +:::interactive_editor + +```html + ``` +::: + This CSS code positions the background image at the center of the element horizontally and at the top vertically. Lastly, `background-attachment` determines whether the background image scrolls with the content or remains fixed when the page is scrolled. @@ -110,27 +152,39 @@ The main values are `scroll` (default), where the background image scrolls with Here is an example using the `fixed` value for the `background-attachment` property: -```css -body { - background-image: url("https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg"); - background-position: center top; - background-attachment: fixed; -} +:::interactive_editor + +```html + ``` +::: + This CSS code sets the background image to remain fixed in place even when the page is scrolled. If you wanted to combine a few of the properties into one line, you can do that by using the shorthand `background` property. Here is an example: -```css -body { - background: center top fixed - url("https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg"); -} +:::interactive_editor + +```html + ``` +::: + The above example combines the `background-image`, `background-position`, and `background-attachment` into a single line. By mastering these properties, you'll have great control over how background images are displayed in your web designs, allowing for more visually appealing and functional layouts.