📚 Quick Study Guide: CSS Background Images
- 🖼️ The `background-image` property in CSS is used to set one or more background images for an element.
- 🔗 To specify an image, you use the `url()` function inside `background-image`, like `background-image: url('my-image.png');`.
- 🔄 By default, a background image will repeat both horizontally and vertically to fill the entire element.
- 🚫 You can control image repetition using `background-repeat`. Common values are `no-repeat` (stops repetition), `repeat-x` (repeats horizontally), and `repeat-y` (repeats vertically).
- 📏 The `background-size` property controls the size of the background image. `cover` makes the image cover the entire element (may crop), while `contain` scales the image to fit within the element without cropping.
- 📍 Use `background-position` to change where the background image starts. Common values include `center`, `top left`, `bottom right`, etc.
- ⚓ `background-attachment` determines if a background image scrolls with the page (`scroll`) or stays fixed in place (`fixed`).
- ✨ For convenience, you can use the `background` shorthand property to set multiple background properties in one line.
🧠 Practice Quiz: CSS Background Images
1. Which CSS property is used to set an image as the background of an HTML element?
- A)
image-background
- B)
bg-image
- C)
background-image
- D)
set-background
2. What is the correct way to add a background image called "pattern.png" to a div element?
- A)
div { background-image: "pattern.png"; }
- B)
div { background-image: url('pattern.png'); }
- C)
div { bg-image: url('pattern.png'); }
- D)
div { image: url('pattern.png'); }
3. By default, how does a background image repeat if you don't specify the background-repeat property?
- A) It doesn't repeat at all.
- B) It repeats only horizontally.
- C) It repeats only vertically.
- D) It repeats both horizontally and vertically.
4. Which property value would you use to stop a background image from repeating?
- A)
background-repeat: no-repeat;
- B)
background-repeat: none;
- C)
background-repeat: stop;
- D)
background-repeat: single;
5. How can you make a background image cover the entire element, even if parts of the image get cropped?
- A)
background-size: contain;
- B)
background-size: fill;
- C)
background-size: cover;
- D)
background-size: auto;
6. Which CSS property changes the starting position of a background image within an element?
- A)
background-align
- B)
background-start
- C)
background-position
- D)
background-origin
7. To make a background image stay in place when the user scrolls down the page, which property should be used?
- A)
background-position: fixed;
- B)
background-attachment: fixed;
- C)
background-scroll: no;
- D)
background-move: static;
Click to see Answers
1. C) background-image
2. B) div { background-image: url('pattern.png'); }
3. D) It repeats both horizontally and vertically.
4. A) background-repeat: no-repeat;
5. C) background-size: cover;
6. C) background-position
7. B) background-attachment: fixed;