Background Properties

Master CSS background properties to create stunning visual effects!

Learning Objectives

Learn about different background properties
Understand background images and gradients
Create layered backgrounds

Explanation

Backgrounds are not just about solid colors! CSS offers many properties to create rich, layered backgrounds: 1. background-color: Sets a solid background color 2. background-image: Adds an image as a background 3. background-repeat: Controls if/how the background image repeats 4. background-position: Sets the starting position of the background image 5. background-size: Controls the size of the background image 6. background-attachment: Determines if the background scrolls with the content You can also create beautiful gradient backgrounds using linear-gradient() or radial-gradient() functions! The shorthand 'background' property lets you set multiple background properties in one line.

Code Example

/* Basic background color */
.basic-bg {
  background-color: #f0f0f0;
}

/* Background image */
.image-bg {
  background-image: url('paper.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* Gradient background */
.gradient-bg {
  background: linear-gradient(to right, #ff9966, #ff5e62);
}

Try It Yourself!

Try creating a gradient background that transitions from blue to purple!

HTML Editor

Mini Quiz

Test your knowledge with these quick questions!

1. Which property controls how a background image repeats?

background-iteration

background-repeat

background-loop

background-cycle

2. What value of background-size makes the image cover the entire container?

full

contain

cover

stretch

Your Progress

Lesson ProgressIn Progress

Est. time: 15-20 min

75 points

Module Progress

JavaScript Fundamentals2/10 completed

Complete all lessons to earn the Code Fundamentalist badge!

Rewards

Complete this lesson

Earn 75 points

Complete this module

Earn the Code Fundamentalist badge