.jpeg)
CSS Background
- CSS Background properties are used to add background styles to HTML elements.
- Background can include colors, images, gradients, and other visual effects.
- CSS provides different properties to control background size, position, and repetition.
- Background properties help create attractive and user-friendly web designs.
What is CSS Background?
CSS Background is a group of properties used to define the background appearance of HTML elements. Using CSS background properties, developers can add colors, images, gradients, and control how backgrounds are displayed on webpages.
Background properties are commonly used for styling sections, headers, buttons, cards, and complete webpage layouts.
CSS Background Properties
background-color
Sets the background color of an element.
background-image
Adds an image as the background of an element.
background-repeat
Controls whether the background image repeats or not.
background-position
Defines the starting position of a background image.
background-size
Controls the size of the background image.
CSS background-color Property
The background-color property is used to set the background color of an HTML element.
You can use color names, HEX values, RGB values, or HSL values.
body {
background-color: lightblue;
}
h1 {
background-color: yellow;
}
CSS background-image Property
The background-image property is used to add an image as the background of an element.
The image is added using the url() function.
div {
background-image:
url("image.jpg");
}
CSS background-repeat Property
By default, background images repeat both horizontally and vertically.
The background-repeat property controls this behavior.
body {
background-repeat:
no-repeat;
}
CSS background-size Property
The background-size property defines the size of the background image.
The most commonly used value is cover, which automatically adjusts the image to cover the element.
section {
background-size:
cover;
}
CSS Background Shorthand Property
CSS allows you to write multiple background properties in a single line using the
background shorthand property.
div {
background:
blue url("image.jpg") no-repeat center;
}
Why Use CSS Background?
Better Design
Background properties improve webpage appearance and visual experience.
Hero Sections
Used to create attractive banner and hero sections.
User Experience
Proper backgrounds make websites easier and more enjoyable to use.
Responsive Design
Background properties help create layouts for different screen sizes.