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 pathbody {
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 pathbody {
background-image: url("https://code2care.com/200/300?demo-image")
}
Output:

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;
- How to make jsfiddle bootstrap ready
- Horizontally Center Align tag in HTML using CSS
- reCAPTCHA Implementation Tutorial
- How to Center Align Image in Bootstrap
- Add scroll to div element in HTML Css
- List of 32 CSS cursors web developers must know about
- align image at middle of div element
- Tutorial : Simple Lightweight Pure CSS based Vertical Navigation Menu
- How to place two div elements next to each other
- CSS Media Query Tutorial for Responsive Mobile First Web Design
- CSS: Apply opacity only for div background and not text
- How to make div or text in html unselectable using CSS
- How to set CSS background-Image Property
More Posts:- Horizontally Center Align tag in HTML using CSS - CSS
- [Tutorial] Write And Run Python Code In Notepad++ Editor - NotepadPlusPlus
- Installing vue.js in Laravel 8 - PHP
- Duplicate id @+id/textView1, already defined earlier in this layout Android Error - Android
- Can Microsoft SharePoint Lists be synced and accessed offline without internet? - SharePoint
- Top 3 Awesome Text Editors developers prefer at workplace - Sublime
- Fix error The tool was unable to install the Web Server (IIS) Role during SharePoint 2019 Setup - SharePoint
- MO229507 UK Europe users cannot access Microsoft 365 - SharePoint, OneDrive, Teams, Admin center, Planner, Yammer - Microsoft
Try Out Code2care Dev Tools:
#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