The Ultimate 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.

1-css-background-image

css-bg

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 Development-MEANExplore Program
Want a Top Software Development Job? Start Here!

Browser Support

Chrome

Mozilla Firefox

Safari

Opera

Yes

Yes

Yes

Yes

Background Image Example

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

/linear1

linear2.

Want a Top Software Development Job? Start Here!

Full Stack Development-MEANExplore Program
Want a Top Software Development Job? Start Here!

Understanding Different Background Properties

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

prop1-css-background-image

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.

prop2

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

prop3

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

prop4

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.

About the Author

Aryan GuptaAryan Gupta

Aryan is a tech enthusiast who likes to stay updated about trending technologies of today. He is passionate about all things technology, a keen researcher, and writes to inspire. Aside from technology, he is an active football player and a keen enthusiast of the game.

View More
  • Disclaimer
  • PMP, PMI, PMBOK, CAPM, PgMP, PfMP, ACP, PBA, RMP, SP, and OPM3 are registered marks of the Project Management Institute, Inc.