Background size in CSS - Mini Project: Build & Apply

Background Size with CSS

📖 Scenario: You are creating a simple webpage section that shows a background image. You want to control how the background image fits inside the section.

🎯 Goal: Build a webpage section with a background image and use CSS background-size property to control how the image fits inside the section.

📋 What You'll Learn

Create an HTML <section> with a class hero.

Add a background image to the .hero section using CSS.

Create a CSS variable called --bgSize to store the background size value.

Use the CSS variable --bgSize to set the background-size property.

Set the background-repeat property to no-repeat.

Set the background-position property to center.

Make sure the section has a fixed height so the background image is visible.

💡 Why This Matters

🌍 Real World

Background images are common in website headers, banners, and sections to create visual interest and branding.

💼 Career

Knowing how to control background images with CSS is essential for front-end web developers and designers to create attractive and responsive layouts.

1

Create the HTML section with class hero

Create an HTML <section> element with the class hero. Inside it, add a heading <h1> with the text Welcome to Our Site.

CSS

  Welcome to Our Site
  

Need a hint?

Use a <section> tag with class="hero" and add a heading inside.

2

Add a CSS variable --bgSize with value cover

In the CSS, create a rule for the .hero class. Inside it, add a CSS variable called --bgSize and set it to the value cover.

CSS

  Welcome to Our Site



.hero {
  /* Define CSS variable --bgSize here */
  /* Your code here */
}

Need a hint?

Use --bgSize: cover; inside the .hero CSS rule.

3

Add background image and use the CSS variable for background-size

In the .hero CSS rule, add a background-image property with the URL https://via.placeholder.com/600x400. Then set background-size to use the CSS variable var(--bgSize). Also add background-repeat: no-repeat; and background-position: center;.

CSS

  Welcome to Our Site



.hero {
  --bgSize: cover;
  /* Add background-image, background-size, background-repeat, background-position here */
  /* Your code here */
}

Need a hint?

Use background-image: url('https://via.placeholder.com/600x400'); and background-size: var(--bgSize); plus the other properties.

4

Set a fixed height for the .hero section

Add a CSS property height to the .hero class and set it to 20rem so the background image area is visible.

CSS

  Welcome to Our Site



.hero {
  --bgSize: cover;
  background-image: url('https://via.placeholder.com/600x400');
  background-size: var(--bgSize);
  background-repeat: no-repeat;
  background-position: center;
  /* Add height property here */
  /* Your code here */
}

Need a hint?

Use height: 20rem; to give the section a visible height.