How to add background image in css

By FoxLearn 6/13/2024 1:14:45 AM   184
To add a background image in css, you can use the background-image property.

Here's how add a background image in css.

body {
    background-image: url('your-image-url.jpg');
    /* Optionally, you can add more background properties */
    background-size: cover; /* Adjusts the size of the background image to cover the entire element */
    background-repeat: no-repeat; /* Ensures the background image is not repeated */
}

In this example:

- url('your-image-url.jpg'): Replace 'your-image-url.jpg' with the path to your image file. You can use either a relative path or an absolute URL.

- background-size: This property sets the size of the background image. In this case, cover is used to make sure the image covers the entire background area - without stretching.

- background-repeat: This property ensures that the background image is not repeated. It can take values like repeat, repeat-x, repeat-y, and no-repeat. In this case, no-repeat is used to prevent repetition.

You can apply this CSS to the body element or any other element you want to have a background image. Make sure to adjust the CSS selector according to your HTML structure and requirements.

Related