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.

Stand Out From Your Peers this Appraisal Season

Start Learning With Our FREE CoursesEnroll Now
Stand Out From Your Peers this Appraisal Season

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.

Full Stack Java Developer Course

The Gateway to Master Web DevelopmentExplore Course
Full Stack Java Developer Course

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.

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

Get skilled in HTML5 and CSS3 with the Full Stack Java Developer Master's Program. Click to check out the program details! 

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.

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.