Home 〉 CSS Tutorials 〉 CSS Background Property with Examples - Learn Background Color, Image, Repeat, Size
CSS Background Property with Examples - Learn Background Color, Image, Repeat, Size !
CSS Background Property with Examples - Learn Background Color, Image, Repeat, Size !
Are you looking to enhance your webpage's visual appeal with backgrounds? The CSS `background` property allows you to set background colors, images, and control their repetition and size. This tutorial covers how to apply solid colors, insert images, and adjust their positioning and scaling. By mastering these properties, you can create visually engaging sections on your website. Explore out blog post on CSS Background Property
Introduction
The 'background' property in CSS is a shorthand to set all background-related styles such as background color, background image, position, repeat, and size.
It helps control the look and feel of a webpage's background, making your layout more visually appealing.
In this Tutorial, we are going to cover the following CSS 'background' properties:
- Background Color
- Background Image
- Background Repeat
- Background Position
- Background Size
- Background Attachment
CSS Background Property - Syntax
Syntax ✍
selector {
background: background-color background-image background-position background-size background-repeat background-attachment;
}
You don't have to use all values. You can use only the ones you need.
Background Color
Code 📝 
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<div style="background-color: lightblue;">This has a light blue background color.</div>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
This sets a solid background color to the element. A complete blog post is availble for background-color property
Background Image
Code 📝
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<div style="background-image: url('/images/image.jpg'); height: 200px;">Background image applied</div>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
Sets an image as the background.
- The URL '/images/image.jpg' is used because the image is located in the 'images' folder.
- If your image is in the same folder as your HTML file, you can simply use 'image.jpg' as the URL.
- For more information on file paths, check our complete blog post on 'file path'.
Background Repeat
Code 📝
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<div style="background-image: url('/images/image.jpg'); background-repeat: no-repeat; height: 200px;"></div>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
'no-repeat prevents the image from repeating. Other options: 'repeat', 'repeat-x', 'repeat-y'.
Background Position
Code 📝
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<div style="height: 200px; background-color: lightgray; background-image: url('/images/image.jpg'); background-repeat: no-repeat; background-position: center;"></div>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
'center' positions the image in the center. Other values: 'top', 'bottom', 'left', 'right'.
Background Size
Code 📝
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<div style="background-image: url('/images/image.jpg'); background-size: cover; height: 200px;"></div>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
'cover' scales the image to fully cover the element.
Background Attachment
Code 📝
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<div style="background-image: url('/images/image.jpg'); background-attachment: fixed; height: 300px;"></div>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
'fixed Makes the background image fixed while scrolling.
Using Full Shorthand Background Property
Code 📝
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<div style="width: 100%; height: 300px; background: lightgray url('/images/image.jpg') no-repeat fixed center;"></div>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
This sets color, image, no-repeat, position, and size in one line.
Best Practices
- Always provide a 'background-color' fallback when using images.
- Use 'cover' or 'contain' with 'background-size' for responsive design.
- Combine properties in shorthand for cleaner code.
Conclusion
The CSS 'background' property is a powerful way to control the visual design of your elements. From simple color fills to full-width responsive background images, mastering this property helps you create beautiful layouts easily.
- ✅ Use 'background-color' for solid backgrounds
- ✅ Use 'background-image' to style sections with photos or patterns
- ✅ Combine all in one shorthand to simplify your CSS
Suggested Topics:
- HTML div and span Tag Explained with Examples - Complete Guide
- HTML img Tag | Complete Guide to HTML Image Tag with Syntax & Attributes
- CSS Width and Height Property Tutorial with Examples for Beginners
Related Topics:
Frequently Asked Questions (FAQs)
Can I use both background color and image together?
Yes. The background color will be shown if the image fails to load.
How to stop background image from repeating?
Use 'background-repeat: no-repeat;'
What is the difference between 'cover' and 'contain'?
'cover' fills the entire element. 'contain' fits the whole image inside the element without cropping.
Is the shorthand 'background' necessary?
No, but it helps write cleaner code when setting multiple background properties.
Can I apply background to the whole page?
Yes, apply it to the '<body>' tag in your CSS.