CSSmarkup~20 mins

Background repeat in CSS - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Background Repeat with CSS

📖 Scenario: You are creating a simple webpage section that uses a background image. You want to control how the background image repeats to create a nice visual effect.

🎯 Goal: Build a webpage section with a background image and use CSS to control the background repeat behavior.

📋 What You'll Learn

Use a semantic HTML structure with a <section> element

Add a background image to the section using CSS

Control the background repeat property with different values

Make sure the background image is visible and repeats as expected

💡 Why This Matters

🌍 Real World

Background images are often used in websites to add texture or decoration. Controlling how they repeat helps create clean and attractive designs.

💼 Career

Web developers frequently use CSS background properties to style pages. Understanding background-repeat is essential for creating professional layouts.

Progress0 / 4 steps

Create the HTML structure with a section

Create a <section> element with the class background-section inside the <body> of your HTML document.

CSS




    
    
    Background Repeat Example

Need a hint?

Use a <section> tag and add class="background-section" inside the <body>.

Add CSS to set the background image

In your CSS file, create a rule for .background-section that sets the background-image to url('https://via.placeholder.com/150') and sets the height to 15rem.

CSS

/* Add CSS for .background-section here */
.background-section {
    /* Your code here */
}

Need a hint?

Use background-image: url('https://via.placeholder.com/150'); and height: 15rem; inside the .background-section CSS rule.

Set the background repeat to repeat

Add the CSS property background-repeat: repeat; inside the .background-section rule to make the background image repeat both horizontally and vertically.

CSS

/* Add CSS for .background-section here */
.background-section {
    background-image: url('https://via.placeholder.com/150');
    height: 15rem;
    /* Your code here */
}

Need a hint?

Use background-repeat: repeat; to repeat the image horizontally and vertically.

Change background repeat to no-repeat

Modify the background-repeat property in the .background-section CSS rule to no-repeat so the background image appears only once.

CSS

/* Add CSS for .background-section here */
.background-section {
    background-image: url('https://via.placeholder.com/150');
    height: 15rem;
    /* Change background-repeat here */
}

Need a hint?

Change the value to no-repeat to show the image only once.