How to set CSS background-Image Property


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;

Advertisements
Try Out Code2care Dev Tools:

Advertisements



#Android #Java #Linux #Microsoft #Google #Python #MacOS #Notepad++ #Microsoft Teams #CSS #PHP #SharePoint #Html #Linux #C-Program #Bootstrap #jQuery #Sublime #Android-Studio #Facebook #Eclipse #WhatsApp #News #MySQL #Json #HowTos #JavaScript #FTP #S3


Advertisements


Code2care is an initiative to publish and share varied knowledge in programming and technical areas gathered during day-to-day learnings and development activities.

Students and Software Developers can leverage this portal to find solutions to their various queries without re-inventing the wheel by referring to our easy to understand posts. Technical posts might include Learnings, Tutorials, Trouble-Shooting steps, Video Tutorials, Code Snippets, How Tos, Blogs, Articles, etc.
🎉 We are celebrating the 10th years of Code2care! Thank you for all your support! We hope we made a difference.
We strong support Gender Equality & Diversity.

We stand in solidarity with Ukraine - Make a donation to UNHCR - https://donate.unhcr.org/in/en-in/ukraine-emergency