CSS Basics

Colors & BG

Box Model

Text Styles

CSS Layout

CSS Effects

Advanced

CSS Backgrounds

❮ Previous Next ❯

CSS Backgrounds: Styling Element Backgrounds

The CSS background is the area behind an element's content, which can be a color, image, or both. The background property lets you control these aspects, including color, image, position, and repetition.

CSS Background Shorthand Property

The background property is a shorthand property for setting all the background style properties at once.

Background Shorthand Example:

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            background: lightblue url("https://via.placeholder.com/250") no-repeat center fixed;
        }
    </style>
</head>
<body>
    <h1>IntricateDevo Background Shorthand</h1>
    <p>This page has a light blue background color and a centered image.</p>
</body>
</html>

Here are the properties that can be set using the CSS Background shorthand or individually:

Background Property Description
background-color Defines the background color of an element using color names, HEX, or RGB values.
background-image Adds one or more images as the background of an element.
background-repeat Specifies how the background image should be repeated—horizontally, vertically, or not at all.
background-attachment Controls the scrolling behavior of the background image, making it fixed or scrollable with the page.
background-position Determines the initial position of the background image within the element.
background-origin Adjusts the placement of the background image relative to the padding, border, or content box.
background-clip Sets how far the background (color or image) should extend within an element (e.g., to the padding or border).

1. Background Color Property

The background-color property in CSS sets the background color of an element. It can accept a color name (e.g., "red"), HEX value (e.g., "#ff0000"), or RGB value (e.g., "rgb(255, 0, 0)").

Syntax:

body {
    background-color: color_name;
}

Background Color Example:

<!DOCTYPE html>
<html>
<head>
    <style>
        h1 {
            background-color: blue;
            color: white;
            padding: 10px;
        }
    </style>
</head>
<body>
    <h1>Welcome to IntricateDevo</h1>
</body>
</html>

In the above example:

2. Background Image Property

The background-image property in CSS is used to set an image as the background of an element. By default, the image is repeated to cover the entire element unless specified otherwise.

Syntax:

body {
    background-image: url("image_link.png");
}

Background Image Example:

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            background-image: url("https://via.placeholder.com/250");
        }
    </style>
</head>
<body>
    <h1>Background Image Page</h1>
</body>
</html>

In the above example:

3. Background Repeat Property

The background-repeat property in CSS specifies how the background image is repeated. By default, the image repeats both horizontally and vertically. You can control the repetition by specifying values such as repeat-x, repeat-y, or no-repeat.

Syntax:

body {
    background-image: url("image_link.png");
    background-repeat: repeat-x;
}

Background Repeat Example:

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            background-image: url("https://via.placeholder.com/250");
            background-repeat: repeat-x;
        }
    </style>
</head>
<body>
    <h1>Horizontal Background Repeat</h1>
</body>
</html>

In the above example:

4. Background Attachment Property

The background-attachment property in CSS specifies how the background image behaves when the user scrolls the page. By setting the value to fixed, the background image stays in place while the content of the page scrolls.

Syntax:

body {
    background-attachment: fixed;
}

Background Attachment Example:

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            background-image: url("https://via.placeholder.com/250");
            background-attachment: fixed;
            height: 2000px; /* Force scrolling */
        }
    </style>
</head>
<body>
    <h1>Fixed Background Image</h1>
    <p>Scroll down to see the effect. The background image will not scroll with the page.</p>
</body>
</html>

In the above example:

5. Background Position Property

The background-position property in CSS is used to set the starting position of the background image within the element. You can use values like top, left, center, or specify exact pixel/percentage values.

Syntax:

body {
    background-repeat: no-repeat;
    background-position: left top;
}

Background Position Example:

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            background-image: url("https://via.placeholder.com/250");
            background-repeat: no-repeat;
            background-position: center;
            height: 100vh; /* Set height to see vertical centering */
            margin: 0;
        }
    </style>
</head>
<body>
    <h1>Centered Background Image</h1>
</body>
</html>

In the above example:

Exercise

?

Which CSS property specifies whether a background image should scroll with the rest of the page or remain fixed?

❮ Previous Next ❯