CSS: Backgrounds

Background Properties

CSS provides several properties to style backgrounds:

• background-color: Sets the background color of an element.
• background-image: Sets a background image for an element.
• background-repeat: Controls whether the background image repeats (e.g., repeat, no-repeat, repeat-x, repeat-y).
• background-size: Specifies the size of the background image (e.g., cover, contain, auto, or specific dimensions).
• background-position: Defines the position of the background image (e.g., center, top, left, right, bottom).
• background-attachment: Specifies whether the background image is fixed or scrolls with the page (e.g., scroll, fixed, local).

Example: Background Styling

/* Example */
div {
    background-color: #f0f0f0;
    background-image: url('background.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
        

This example applies a background image with specific styling to a div element.

Practice

Try experimenting with background properties:

• Set a gradient as the background using background-image.
• Use background-size to fit an image within an element.
• Combine multiple background images using background.

Continue Learning

• Next: CSS Borders & Border Radius