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
- How to place two div elements next to each other
- List of 32 CSS cursors web developers must know about
- How to create a circular Image using pure CSS Code
- How to set CSS background-Image Property
- Tutorial : Simple Lightweight Pure CSS based Vertical Navigation Menu
- Only Chessboard using HTML and CSS Code Example
- Set Falling Show on Website for Christmas using Pure CSS Code
- Horizontally Center Align
- How to Center Align Image in Bootstrap
- align image at middle of div element
- CSS Media Query Tutorial for Responsive Mobile First Web Design
- reCAPTCHA Implementation Tutorial
- Add scroll to div element in HTML Css
- CSS: Apply opacity only for div background and not text
- How to make div or text in html unselectable using CSS
- Change Android EditText Cursor Height - Android
- How to clear MySQL Console Screen - MySQL
- [Eclipse] Enable or Disable print margin line - Eclipse
- [Fix] Docker Run unknown shorthand flag: 'r' in -rm - Docker
- Remove AirDrop Icon from macOS Menu Bar - MacOS
- Failed to sync Gradle project Error:failed to find target android-23 - Android
- How to Word-Warp Console logs in IntelliJ - Java
- Check help on commands while being on sftp> prompt - FTP