CSS Tutorial
Introduction
CSS Properties
CSS Designing
CSS Advance Topics
CSS FAQs
CSS Backgrounds
CSS background properties allow you to decorate elements with colors, images, and even fixed scroll effects. These properties help build visually appealing layouts.
Background Color
Use background-color to fill an element’s background with a solid color.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
section {
background-color: #f0f8ff; /* Alice Blue */
padding: 20px;
}
h2 {
background-color: #6a0dad; /* Purple */
color: white;
}
p {
background-color: #ffe4b5; /* Moccasin */
}
</style>
</head>
<body>
<section>
<h2>Learn With Arshyan</h2>
<p>Master Web Design and Development</p>
</section>
</body>
</html>
Background Image
Use background-image to apply an image as the background of an element.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.banner {
height: 600px;
background-image: url("new\ logo.png");
}
</style>
</head>
<body>
<div class="banner"> </div>
</body>
</html>
Background Repeat
Be default, background images repeat both horizontally and vertically. You can change this behavior using: repeat , repeat-x, repeat-y, and no-repeat.
Example:
<style>
.box-x {
background-image: url('icon.png');
background-repeat: repeat-x;
height: 150px;
}
.box-y {
background-image: url('icon.png');
background-repeat: repeat-y;
height: 200px;
}
.box-no {
background-image: url('icon.png');
background-repeat: no-repeat;
height: 150px;
}
</style>
Background Size
Control the size of your background image using: auto default, cover, contain, and width & height values (%, px).
Example:
<style>
.cover-box {
background-image: url('cover.jpg');
background-size: cover;
height: 250px;
}
.contain-box {
background-image: url('logo.png');
background-size: contain;
background-repeat: no-repeat;
height: 200px;
}
.scaled-box {
background-image: url('logo.png');
background-size: 100% 100%;
height: 200px;
}
</style>
Background Position
Set where the background image appears inside the element using: top, bottom, left, right, center or combination like top right, center center.
Example:
<style>
.pos-box {
background-image: url('badge.png');
background-repeat: no-repeat;
background-position: bottom left;
background-color: #fafafa;
height: 200px;
}
</style>
Background Attachment
The background-attachment property decides whether the image scrolls with the page.
scroll(default)fixed(remains in place)
Example:
<style>
.fixed-bg {
background-image: url('mountains.jpg');
background-attachment: fixed;
background-size: cover;
height: 400px;
color: white;
padding: 50px;
}
</style>
Background Shorthand
Combine multiple background properties into one line.
Syntax:
selector {
background: [color] [attachment] [image] [repeat] [position];
}
Example:
<style>
.shorthand-box {
background: #e4da82 fixed url("new\ logo.png") no-repeat center;
height: 250px;
color: white;
padding: 30px;
}
</style>
