CSS Backgrounds
The CSS background properties are used to define the background effects for elements. These properties allow you to set background colors, images, and other effects to make your web pages look more attractive.
Basic Properties for CSS Background
1. Background Color
The background-color property sets the background color of an element.
Example:
Output:
In this example:
• body { background-color: lightblue; }: This CSS rule sets the background color of the entire webpage (the <body> element) to light blue.
• <h1>: Displays a heading with the text “The background color of the entire page (body) is light blue.”
2. Background Image
The background-image property sets an image as the background.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-image: url(‘example.jpg’);
}
</style>
</head>
<body>
<div>
<h1>Content inside the div</h1>
<p>This div has a background image.</p>
</div>
</body>
</html>
Output:
In this example:
• div { background-image: url(‘example.jpg’); }: This CSS rule sets a background image (example.jpg) for all <div> elements.
• <div>: A container element with the specified background image.
• <h1>: Displays a heading “Content inside the div”.
• <p>: Displays a paragraph “This div has a background image.
3. Background Repeat
The background-repeat property defines if/how a background image will be repeated.
Background repeat values are as follows:
• repeat: The background image repeats both vertically and horizontally, and it’s a default value.
• repeat-x: The background image repeats only horizontally.
• repeat-y: The background image repeats only vertically.
• no-repeat: The background image does not repeat.
• space: Repeats the image as much as possible without clipping.
• round: Scales the image to fit the container.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url(‘example.jpg’);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div>
<h1>Content inside the div</h1>
<p>This div has a background image.</p>
</div>
</body>
</html>
Output:
In this example:
• div { background-image: url(‘example.jpg’); background-repeat: no-repeat; }: This CSS rule sets a background image (example.jpg) for all <div> elements and specifies that the background image should not be repeated.
• <div>: A container element with the specified background image and no-repeat style.
• <h1>: Displays a heading “Content inside the div”.
• <p>: Displays a paragraph “This div has a background image.”
4. Background Position
The background-position property sets the starting position of the background image.
Background position values are as follows:
• left top
• center center
• right bottom
• You can also use specific values like 50px 100px.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-image: url(‘example.jpg’);
background-position: center;
}
</style>
</head>
<body>
<div>
<h1>Content inside the div</h1>
<p>This div has a background image.</p>
</div>
</body>
</html>
Output:
In this example:
• div { background-image: url(‘example.jpg’); background-position: center; }: This CSS rule sets a background image (example.jpg) for all <div> elements and positions the background image at the center of the <div>.
• <div>: A container element with the specified background image centered.
• <h1>: Displays a heading “Content inside the div”.
• <p>: Displays a paragraph “This div has a background image.”
5. Background Size
The background-size property specifies the size of the background image.
Background size values are as follows:
• cover: The background image will cover the entire element, resizing as needed.
• contain: The background image will be resized to fit within the element.
• You can also use specific values like 100px 100px or percentages like 50% 50%.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-image: url(‘example.jpg’);
background-size: cover;
}
</style>
</head>
<body>
<div>
<h1>Content inside the div</h1>
<p>This div has a background image.</p>
</div>
</body>
</html>
Output:
In this example:
• div { background-image: url(‘example.jpg’); background-size: cover; }: This CSS rule sets a background image (example.jpg) for all <div> elements and specifies that the background image should cover the entire area of the <div>, maintaining the aspect ratio of the image.
• <div>: A container element with the specified background image set to cover the entire element.
• <h1>: Displays a heading “Content inside the div”.
• <p>: Displays a paragraph “This div has a background image.”
6. Background Attachment
The background-attachment property specifies whether the background image is fixed or scrolls with the rest of the page.
Background size values are as follows:
• scroll: The background image scrolls with the rest of the page (default).
• fixed: The background image stays fixed and does not scroll.
• local: The background image scrolls with the element’s content.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-image: url(‘example.jpg’);
background-attachment: fixed;
}
</style>
</head>
<body>
<div>
<h1>Content inside the div</h1>
<p>This div has a background image.</p>
</div>
</body>
</html>
Output:
In this example:
• div { background-image: url(‘example.jpg’); background-attachment: fixed; }: This CSS rule sets a background image (example.jpg) for all <div> elements and specifies that the background image should be fixed. The background image will remain stationary when the user scrolls the page.
• <div>: A container element with the specified background image set to remain fixed.
• <h1>: Displays a heading “Content inside the div”.
• <p>: Displays a paragraph “This div has a background image.”
7. Background Shorthand Property
You can set multiple background properties at once using the background shorthand property.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
background: url(‘example.jpg’) no-repeat center/cover fixed;
}
</style>
</head>
<body>
<div>
<h1>Content inside the div</h1>
<p>This div has a background image.</p>
</div>
</body>
</html>
Output:
In this example:
• div { background: url(‘example.jpg’) no-repeat center/cover fixed; }: This CSS rule sets several properties for the background of all <div> elements.
• background-image: url(‘example.jpg’): Sets the background image to example.jpg.
• background-repeat: no-repeat: Ensures the background image does not repeat.
• background-position: center: Centers the background image within the <div>.
• background-size: cover: Scales the background image to cover the entire area of the <div>, maintaining its aspect ratio.
• background-attachment: fixed: Keeps the background image fixed when the user scrolls the page.
• <div>: A container element with the specified background image properties.
• <h1>: Displays a heading “Content inside the div”.
• <p>: Displays a paragraph “This div has a background image.”
Example Combining Background Properties
<!DOCTYPE html>
<html>
<head>
<style>
.background-example {
background-color: lightblue;
background-image: url(‘example.jpg’);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
height: 500px; /* Example height to see the background */
}
</style>
</head>
<body>
<div class=”background-example”>
<h1>Hello World!</h1>
<p>This is an example of CSS backgrounds.</p>
</div>
</body>
</html>
Output:
In this example:
• .background-example: This is a CSS class selector that applies several background-related properties to any element with this class
• background-color: lightblue;: Sets the background color of the element to light blue.
• background-image: url(‘example.jpg’);: Sets the background image to example.jpg.
• background-repeat: no-repeat;: Ensures that the background image does not repeat.
• background-position: center;: Centers the background image within the element.
• background-size: cover;: Scales the background image to cover the entire element while maintaining its aspect ratio.
• background-attachment: fixed;: Keeps the background image fixed in place when the user scrolls the page.
• height: 500px;: Sets a specific height for the element to make the background image visible.
• <div class=”background-example”>: A <div> element with the class background-example, which applies all the background properties defined in the CSS.
• <h1>: Displays a heading with the text “Hello World!”.
• <p>: Displays a paragraph with the text “This is an example of CSS backgrounds.”
Background Property Advantages and Disadvantages
Advantages:
• Flexibility: Allows for a wide range of design possibilities.
• Visual Appeal: Enhances the visual appearance of websites.
• Customization: Easily customizable with various properties.
Disadvantages:
• Performance: Large background images can slow down page load times.
• Compatibility: Some background properties may not be supported in older browsers.
• Maintenance: Complex background settings can be harder to maintain and update.
Conclusion
CSS background properties allow you to add colors, images, and other effects to your web pages, making them more visually appealing. By mastering these properties, you can create stunning backgrounds that enhance the look and feel of your website.
Course Video
YouTube Reference :
Practice Scenarios
Scenario 1: Simple Background Color
Objective: Set a solid background color for a web page.
Expected Output: The entire page should have a light green background.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightgreen;
}
</style>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a web page with a light green background color.</p>
</body>
</html>
Output:
Scenario 2: Background Image
Objective: Set a background image for a web page.
Expected Output: The background image should cover the entire page.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url(‘example.jpg’);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
</style>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a web page with a background image.</p>
</body>
</html>
Output:
Scenario 3: Background Color with Background Image
Objective: Combine a background color with a partially transparent background image.
Expected Output: The page should have a light gray background color with a semi-transparent background image overlay.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #d3d3d3;
background-image: url(‘example.png’);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
opacity: 0.8;
}
</style>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a web page with a background color and a semi-transparent background image.</p>
</body>
</html>
Output:
Scenario 4: Background Gradient
Objective: Apply a linear gradient as the background of a web page.
Expected Output: The background should smoothly transition from light blue at the top to light green at the bottom.
Output:
Scenario 5: Background Positioning
Objective: Set a background image and position it at the top right corner of the page.
Expected Output: The background image should be positioned at the top right corner and should not repeat.
Output:
