The Ultimate Power-packed Guide to CSS Background Image

CSS stands for Cascading Style Sheet, which is a language used alongside HTML to separate webpage’s content from the design and formatting. It defines fonts, colors, margins, lines, height, width, backgrounds, images, positions, and other visual aspects of a webpage, something which HTML was not originally designed to do. In this article, we will learn about the background-image property of CSS.

CSS Background-Image Property

The background-image property of CSS is used to set one or more background images on an element.

Syntax: background-image: url();

The url() value allows us to include a file path to any image.

Background Image Example

Set a background image for the body element.

By default, it places the image at the top-left corner of an element, repeated both horizontally and vertically.

Want a Top Software Development Job? Start Here!

Full Stack Developer - MERN StackExplore Program

Browser Support

Background Image Example

Sets a linear-gradient (two colors) as a background image for the body element.

Want a Top Software Development Job? Start Here!

Full Stack Developer - MERN StackExplore Program

Understanding Different Background Properties

Let’s try to understand the different properties of background with the help of an example.

The background-size is used to set the size of the image on the page. The background-size: cover will fit the image across the page.

With no-repeat, the background image will not be repeated. The image will be shown only once.

Let’s change the value and see how it affects the image on the page.

The height value specifies the width of the image, and the repeat value will repeat the images both horizontally and vertically.

Conclusion

The CSS background-image property is an important aspect of web designing. It helps you to add the background image and also control its several properties. You can also add colors in place of the image if required. In this article, we learned all about it through several examples.

If you have any questions or feedback regarding our CSS background-image article, let us know in the comments section. Our experts will get back to you as soon as possible.

Check out Our Simplilearn's Post Graduate Program in Full Stack Web Development and I've indepth guide.