CSSmarkup~15 mins

Background position in CSS - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Background Position with CSS

📖 Scenario: You are creating a simple webpage section that uses a background image. You want to control where the background image appears inside the section.

🎯 Goal: Build a webpage with a <section> that has a background image. Use CSS to set the background image and then adjust its position to show different parts of the image.

📋 What You'll Learn

Create a <section> element with a class hero in HTML.

Add a background image to the .hero class in CSS.

Set the background position to center initially.

Change the background position to top right later.

Use CSS properties correctly and ensure the background image covers the section.

💡 Why This Matters

🌍 Real World

Background images are often used in website headers, banners, and sections to create visually appealing layouts.

💼 Career

Knowing how to control background images with CSS is a fundamental skill for front-end web developers and designers.

Progress0 / 4 steps

Create the HTML structure with a section

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

CSS




    
    
    Background Position Demo

Need a hint?

Use the <section> tag and add class="hero" inside the <body>.

Add a background image and basic styles

In a <style> block inside the <head>, add CSS for the .hero class. Set the background image to https://via.placeholder.com/600x400, set the height to 20rem, and set background-size to cover.

CSS




    
    
    Background Position Demo
    
        /* Add CSS for .hero here */

Need a hint?

Use background-image with url(), set height to 20rem, and background-size to cover.

Set the background position to center

Inside the .hero CSS block, add background-position: center; to center the background image inside the section.

CSS




    
    
    Background Position Demo
    
        .hero {
            background-image: url('https://via.placeholder.com/600x400');
            height: 20rem;
            background-size: cover;
            /* Add background-position center here */
        }

Need a hint?

Use background-position: center; inside the .hero CSS block.

Change the background position to top right

Modify the background-position property in the .hero CSS block to top right so the background image aligns to the top right corner.

CSS




    
    
    Background Position Demo
    
        .hero {
            background-image: url('https://via.placeholder.com/600x400');
            height: 20rem;
            background-size: cover;
            /* Change background-position to top right here */
        }

Need a hint?

Change the value of background-position to top right.