gitadmin/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-05-28 18:26:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(curriculum): Add interactive examples to background images lesson (#62814)

Browse Source
This commit is contained in:
Giftea ☕
2025-10-14 21:48:21 +01:00
committed by GitHub
parent 63d186649d
commit 594ebd066b
1 changed files with 111 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
curriculum/challenges/english/blocks/lecture-working-with-backgrounds-and-borders/672aa669960f6a596081fcad.md
+111 -57
View File
@@ -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
<style>
body {
background-image: url("https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg");
}
</style>
```
:::
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
<style>
body {
background-image: url("https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg");
background-size: contain;
min-height: 100px;
}
</style>
```
:::
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
<style>
body {
background-image: url("https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg");
background-size: cover;
min-height: 100px;
}
</style>
```
:::
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
<style>
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;
}
</style>
```
:::
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
<style>
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;
}
</style>
```
:::
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
<style>
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;
}
</style>
```
:::
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
<style>
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;
}
</style>
```
:::
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
<style>
body {
background-image: url("https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg");
background-position: center top;
background-attachment: fixed;
}
</style>
```
:::
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
<style>
body {
background: center top fixed
url("https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg");
}
</style>
```
:::
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.