How to Set Background Image in CSS

September 20, 2022 | by Arround The Web | No comments

How to Set Background Image in CSS

To set an image behind the element, the “background-image” property of CSS comes into play. By default, it appears on the top left corner of the screen and is repeated horizontally and vertically. You can also add more than one image in the background of the HTML element; moreover, set the width and height of the image as per your preferences. However, you can also stop the repetition of the image.

This write-up will provide the following learning outcomes:

- background-image property
- How to set a background image

“background-image” CSS Property

The “background-image” property is used to apply an image at the background of a specified tag.

Syntax

Here is the syntax to set a background image to an HTML element:

background-image: image url();

Here, image url() has the image name or image folder path in which it exists.

Let us try an example to have a better understanding.

Example: How to Set a Background Image Using CSS?

In this example, first, we will create two more elements (<h1> and <p> tags), behind which the background image will be added. You can add elements according to your choice and apply background-image property to it:

<body>
<h1>SET BACKGROUND IMAGE</h1>
<p>
To set the background image use css background image property
</p>
</body>

You can add elements according to your choice and apply background-image property to it.

Move to the CSS and assign the name of the image in “background-image” url:

body {
background-image: url("img.jpg");
}

Once you have completed all the steps, execute the HTML file, you will get the following outcome:

Here you can see that the background image is being repeated. To avoid this, use the “background-repeat” property and set its value to “no-repeat”:

body {
background-image: url("img.jpg");
background-repeat: no-repeat;
}

Once it is all done, execute the code, and check out your web page:

Now, you have a clean and elegant look of the background image set to the <body> tag.

Good Practices for setting background Images

- Select an image to match your text color.
- Use attractive color combinations.
- If your background image and text color do not match each other, your web page is poorly designed.

Conclusion

To add a background image in CSS, use the “background-image” property and give the URL of the image in the URL() function of CSS. You can also prevent your image from repeating by using the “background-repeat” property and setting its value to “none”. This article explained the procedure to add an image to the background using the “background-image” and “background-repeat” properties.

Source: linuxhint.com