How to set CSS background-Image Property

Created: 26th Jan 26 1 Views
Review needed
Verified
Loading...
Loading...
Comments

If you want to set the background for an HTML page, a div element, or any section of your HTML code, you should make use of the background-Image CSS property,

In this tutorial we will do a deep dive into the CSS background-Image property with examples.

Example: How to set background image to an HTML Page

If you want to set a background image to the complete HTML page, then you need to set the CSS property background-Image for the <body> tag of the page,

You can make use of the property background-image followed by the URL to the image file you want to use as a background, note this background will be repeated both in x and y direction (horizontally and vertically) and will fill up the complete page background by default. There is no padding or margin applied and the image cover up the whole page.

Example with background image relative path 
body {
 background-image: url("image/background_image.png")
}

You can also use a web URL instead of a local or a relative file name as shown in the below example,

Example with background image absolute URL path 
body {
 background-image: url("https://code2care.com/200/300?demo-image")
}
Output:
Set Background Image using CSS for entire HTML page Body

JSFiddle Link: https://jsfiddle.net/code2care/gn1s6ohf/3/

Browser Compatibility:

background-image property is compatible with all the major web browsers and it has been available since the 1.0 version of browsers like Safari, Firefox, Chrome, and Internet Explorer.

⚠️ If you want to override the background-image property then you can set its value as none.

background-image: none;

Comments & Discussion

Facing issues? Have questions? Post them here! We're happy to help!