Background Image ( using CSS )

The background-image property in CSS allows you to set an image as the background of an element. It can be used with various other background properties to control how the image appears, scales, and repeats within the element.

Syntax of background-image

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

Properties Associated with background-image

There are several CSS properties related to background images that allow you to customize their appearance. These properties are commonly used together to create flexible and responsive designs.

1. background-size

Defines the size of the background image.

• cover: Scales the image to cover the entire element. The image will maintain its aspect ratio, but it might be cropped if the element's aspect ratio differs.

div {
    background-color: rgb(255, 255, 255);
    height: 500px;
    width: 500px;
    margin : auto;
    border: 2px red solid;
    background-image: url("bg.jpg");
    background-size: cover;
}

• contain: Scales the image to fit entirely within the element. The entire image will be visible, but there may be space around it if the aspect ratio doesn’t match.

div {
    background-color: rgb(255, 255, 255);
    height: 500px;
    width: 500px;
    margin : auto;
    border: 2px red solid;
    background-image: url("bg.jpg");
    background-size: contain;
}

• Custom sizes: You can also specify exact sizes using units like pixels (px), percentages (%), or other length values.

div {
    background-color: rgb(255, 255, 255);
    height: 500px;
    width: 500px;
    margin : auto;
    border: 2px red solid;
    background-image: url("bg.jpg");
    background-size: 20% 20%;
}

2. background-repeat

Specifies whether the background image should repeat (default behavior) or not.

• repeat: Repeats the image both horizontally and vertically (this is the default).

• repeat-x: Repeats the image horizontally only.

• repeat-y: Repeats the image vertically only.

• no-repeat: Prevents the image from repeating.

3. background-position

Defines the starting position of the background image within the element. You can use keywords like top, bottom, left, right, center, or you can specify exact coordinates in pixels or percentages.

Summary of Key Background Properties: