Background Properties

In CSS, you can set the background of an element using various properties.

Here's an overview of commonly used background-related properties:

Background Color (background-color):

Specifies the background color of an element. We can use color names, hexadecimal values, RGB, RGBA, HSL, HSLA, or other supported color formats.

Example:

div {
    background-color: #f0f0f0; /* Light gray background color */
}

Background Image (background-image):

Example:

div {
    background-image: url('image.jpg');
}

Specifies an image to use as the background of an element. We can use a relative or absolute path to the image file.

Example:

div {
    background-repeat: no-repeat; /* Do not repeat the background image */
}

Background Repeat (background-repeat):

Example:

div {
    background-size: cover; /* Resize the background image to cover the entire element */
}

Specifies how the background image should repeat, if at all. Values include "repeat", "repeat-x", "repeat-y", and "no-repeat".

Example:

div {
    background-position: center; /* Center the background image */
}

Background Size (background-size):

Example:

div {
    background-attachment: fixed; /* Fix the background image */
}

Specifies the size of the background image. We can use values like "auto", "cover", "contain", or specify the 'width' and 'height' in pixels (px) or other units.

Background Position (background-position):

Specifies the starting position of a background image within its container. We can use keywords like "top", "center", "bottom", "left", "right", or specify the position using coordinates.

Background Attachment (background-attachment):

Specifies whether the background image scrolls with the content or remains fixed. Values include "scroll" and "fixed".

Example:

div {
    width: 300px;
    height: 200px;
    background-color: #f0f0f0;
    background-image: url('image.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

<-- CSS Border Properties

Height/width Properties -->