CSSmarkup~30 mins

Background image in CSS - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Background Image with CSS

📖 Scenario: You are creating a simple webpage for a local coffee shop. They want a warm, inviting background image on their homepage to attract visitors.

🎯 Goal: Build a webpage with a full-screen background image that covers the entire viewport and stays fixed when scrolling.

📋 What You'll Learn

Use a semantic HTML5 structure with <main> and <header>.

Add a background image to the body using CSS.

Make sure the background image covers the entire screen and stays fixed when scrolling.

Use CSS properties background-image, background-size, background-attachment, and background-position.

Ensure the page is responsive and the background image scales nicely on different screen sizes.

💡 Why This Matters

🌍 Real World

Background images are common on websites to create mood and branding. Knowing how to add and style them is essential for web design.

💼 Career

Web developers often need to implement background images that are responsive and accessible, ensuring good user experience across devices.

Progress0 / 4 steps

Create the HTML structure

Create an HTML file with a body containing a <header> with the text "Welcome to Cozy Coffee" and a <main> section with the text "Enjoy your favorite coffee here."

CSS

Welcome to Cozy Coffee
Enjoy your favorite coffee here.

Need a hint?

Use semantic tags like <header> and <main> inside the <body>.

Add CSS file link and background image URL

Add a <link> tag inside the <head> to link a CSS file named styles.css. Then, in styles.css, create a CSS variable called --bg-image and set it to the URL "https://example.com/coffee-background.jpg".

CSS




    
    
    Cozy Coffee
    


    Welcome to Cozy Coffee
    Enjoy your favorite coffee here.



/* In styles.css */
:root {
    /* Define background image URL here */
}

/* Your code here */

Need a hint?

Use <link rel="stylesheet" href="styles.css"> inside <head>. In CSS, use :root to define --bg-image.

Apply the background image to the body

In styles.css, add CSS rules to the body selector to set the background image using the --bg-image variable. Also set background-size to cover, background-position to center, and background-attachment to fixed.

CSS

:root {
    --bg-image: url("https://example.com/coffee-background.jpg");
}

body {
    /* Set background image and properties here */
    /* Your code here */
}

Need a hint?

Use background-image: var(--bg-image); and set the other background properties as instructed.

Add basic styling for text and ensure accessibility

In styles.css, add CSS to set the body text color to #fff for contrast. Also add padding of 2rem to header and main. Finally, add aria-label="Main content" to the <main> tag in the HTML for accessibility.

CSS




    
    
    Cozy Coffee
    


    Welcome to Cozy Coffee
    Enjoy your favorite coffee here.



/* In styles.css */
:root {
    --bg-image: url("https://example.com/coffee-background.jpg");
}

body {
    background-image: var(--bg-image);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    /* Add text color here */
}

header, main {
    /* Add padding here */
}

/* Your code here */

Need a hint?

Set color: #fff; on body and add padding: 2rem; to header and main. Add aria-label="Main content" to the <main> tag.