Background Colors and Images
If you’ve ever looked at a website and admired its colorful sections or full-screen images, you’ve already seen background colors and background images in action. In this beginner-friendly guide, you’ll learn how to add them to your own web page using simple HTML and CSS.
We’ll start with plain background colors, then move to background images, and finally combine both. By the end, you’ll be able to style your first page so it looks more like a real website and less like a plain document.
What You Need Before You Start
You don’t need any prior coding experience for this tutorial. All you need is:
- A text editor (Notepad, VS Code, or any basic editor)
- A web browser (Chrome, Firefox, Edge, etc.)
- A simple HTML file to work with
We’ll use a single file called index.html to keep things simple.
You’ll write some HTML and a bit of CSS (the language used to style web pages).
Step 1: Create a Simple HTML Page
First, let’s create a basic page that we can style.
- Open your text editor.
- Create a new file and save it as
index.html. - Add this code to the file:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My First Background</title>
<!-- We will add our CSS styles between these <style> tags -->
<style>
/* Styles will go here */
</style>
</head>
<body>
<h1>Hello, Backgrounds!</h1>
<p>This is my first page with custom backgrounds.</p>
</body>
</html>
Save the file, then double-click it to open it in your browser. You should see a white page with a heading and a sentence.
Step 2: Add a Simple Background Color
Now let’s change the background color of the whole page.
We’ll use CSS inside the <style> section of your HTML.
Replace the empty /* Styles will go here */ part in the <style> tag with this:
<style>
/* Change the background of the whole page */
body {
background-color: lightblue; /* Sets a light blue background */
font-family: Arial, sans-serif; /* Makes the text look nicer */
}
</style>
Your browser page should now have a light blue background.
The body part means “style the entire page,” and background-color sets the color.
Try it yourself
Change lightblue to other color names like pink, beige, or lightgreen, then refresh the page.
You can also try hex codes like #f0f0f0 for very light gray.
Example:
body {
background-color: #f0f0f0; /* light gray */
}
Step 3: Add Background Color to a Section
You don’t have to color the whole page. You can color just parts of it, like a specific section or box.
Add this code inside the <body> tag, below your <p>:
<div class="highlight-box">
<h2>Colored Section</h2>
<p>This area has its own background color.</p>
</div>
Now add these styles inside your <style> tag:
.highlight-box {
background-color: white; /* Background of this box */
padding: 20px; /* Space inside the box */
margin: 20px; /* Space outside the box */
border-radius: 8px; /* Smooth, rounded corners */
}
The dot before highlight-box (.highlight-box) means we’re styling a class.
A class is just a label you can give to HTML elements so you can style them.
You should now see a white box on your light blue page with rounded corners and some space around it.
Try it yourself
- Change
background-color: white;tobackground-color: yellow;. - Adjust
padding: 20px;topadding: 40px;and see how the box grows.
This is how websites create different sections, cards, or content areas.
Step 4: Add a Background Image to the Page
Background colors are nice, but images can make your page look more exciting. To use a background image, you’ll need an image file on your computer.
- Download or find an image (for example,
background.jpg). - Save it in the same folder as your
index.htmlfile.
Now update the body style in your <style> tag to something like this:
body {
background-image: url('background.jpg'); /* Use your image file name */
background-repeat: no-repeat; /* Don’t repeat the image */
background-size: cover; /* Make the image fill the screen */
background-position: center; /* Center the image */
color: white; /* Make text easier to see */
font-family: Arial, sans-serif;
}
Here’s what each part does:
background-image: url('background.jpg');tells the browser which image to use.background-repeat: no-repeat;stops the image from repeating like tiles.background-size: cover;stretches/crops the image to cover the whole screen.background-position: center;centers the image.color: white;changes the text color so it’s readable on a dark image.
Reload your page. You should now see your image behind all your content.
Try it yourself
Play with these values:
body {
background-repeat: repeat; /* Try repeating the image */
background-size: contain; /* Try 'contain' instead of 'cover' */
}
See how the image behaves with each change. This experimentation is one of the best ways to learn.
Step 5: Use Both a Background Color and Image Together
Sometimes your image may load slowly or not at all. It’s helpful to have a fallback color that shows while the image loads.
You can combine color and image in one rule like this:
body {
background-color: #222; /* Dark gray fallback color */
background-image: url('background.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
color: #f9f9f9; /* Light text color */
}
If the image fails to load, users will still see a dark gray background instead of plain white. This makes your page feel more intentional and polished.
Try it yourself
- Temporarily rename your image file (for example, to
background-missing.jpg). - Refresh the page and notice that the color still appears, even when the image doesn’t.
This is exactly how many real websites handle background images.
Step 6: Background Image on a Single Section
You don’t have to put a background image on the whole page. You can also put it on a specific box or section, just like we did with colors.
Add a new section inside the <body> tag:
<section class="hero">
<h2>Welcome to My Page</h2>
<p>This section has its own background image.</p>
</section>
Now add these styles inside your <style> tag:
.hero {
background-image: url('hero.jpg'); /* A different image for this section */
background-size: cover; /* Fill this section with the image */
background-position: center;
color: white;
padding: 60px 20px; /* Top/bottom and left/right padding */
text-align: center; /* Center the text */
margin-top: 20px;
}
Make sure you have another image called hero.jpg in the same folder.
If not, copy your first image and rename it to hero.jpg just to test.
Now your page will have a special “hero” section (like a banner) with its own background image. This is a common pattern on modern websites.
Try it yourself
- Change
padding: 60px 20px;topadding: 100px 20px;to make the hero section taller. - Try a different image for
hero.jpgto see how the mood of the page changes.
Quick Recap and What’s Next
You’ve just taken big steps into styling web pages with backgrounds. Here’s what you learned:
- How to create a basic HTML page and add CSS using the
<style>tag - How to set background colors on the page and on specific sections
- How to add background images that cover the page or a section
- How to combine a color and an image for better design and reliability
If some parts felt confusing, that’s completely normal. Learning to code is a process, and every small experiment you try helps you understand more.
Next steps you can try:
- Look up different color formats: color names, hex (
#ffffff), and RGB (rgb(255, 255, 255)). - Add more sections with different background colors and images.
- Explore online tools that help you pick color palettes.
Most importantly, keep playing with your code. Change a value, refresh the page, and see what happens—this is how you grow your skills, one small step at a time.
