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;
- Elegant CSS Box Shadows Ideas
- How to Vertically Center Align Text in a Div using CSS Code Example
- How to Center Align Image in Bootstrap
- Change CSS Background Opacity with Examples
- Tutorial : Simple Lightweight Pure CSS based Vertical Navigation Menu
- Simple CSS Grid Example
- CSS: Apply opacity only for div background and not text
- How to create a circular Image using pure CSS Code
- How to place two div elements next to each other
- Responsive Web Design with CSS Media Queries: A Beginner's Tutorial [Updated for 2023]
- Add scroll to div element in HTML Css
- How to make div or text in html unselectable using CSS
- reCAPTCHA Implementation Tutorial
- Set Falling Show on Website for Christmas using Pure CSS Code
- How to set CSS background-Image Property
- List of 32 CSS cursors web developers must know about
- 10 Must Know CSS Border Styles with Examples
- How to make jsfiddle bootstrap ready
- Horizontally Center Align
- Tailwind CSS Hello World Example
- align image at middle of div element
- Only Chessboard using HTML and CSS Code Example
- Fibonacci series from 1 to 500 table - Html
- Convert Java Object to JSON using Jackson Library - Java
- How to Gzip a file directory on Mac OS X using Terminal Command - Mac-OS-X
- MacBook - Time Limit - You have reached your time limit, Ignore Limit - MacOS
- Delete Android Studio Projects - Android-Studio
- bash: cls: command not found - Linux
- How to Freeze Top Row in Excel for Mac - Windows
- Change Sublime Text 3 white background color theme - Sublime-Text