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 create a circular Image using pure CSS Code
- Horizontally Center Align tag in HTML using CSS
- Add scroll to div element in HTML Css
- Change CSS Background Opacity with Examples
- How to make text bold using CSS
- How to place two div elements next to each other
- Vertically Center Text in a DIV Element
- align image at middle of div element
- Tailwind CSS Hello World Example
- How to make div or text in html unselectable using CSS
- Only Chessboard using HTML and CSS Code Example
- Simple CSS Grid Example
- How to set CSS background-Image Property
- CSS Background Opacity with Examples
- reCAPTCHA Implementation Tutorial
- List of 32 CSS cursors web developers must know about
- How to Vertically Center Align Text in a Div using CSS Code Example
- 10 Must Know CSS Border Styles with Examples
- Tutorial : Simple Lightweight Pure CSS based Vertical Navigation Menu
- CSS: Apply opacity only for div background and not text
- Set Falling Show on Website for Christmas using Pure CSS Code
- How to make jsfiddle bootstrap ready
- Elegant CSS Box Shadows Ideas
- Responsive Web Design with CSS Media Queries: A Beginner's Tutorial [Updated for 2023]
- How to Center Align Image in Bootstrap
More Posts:- Spring Boot: Transactions Management with JDBCTemplate Example - Java
- 30+ Zoom video communications application shortcuts for macOS - MacOS
- Java JDK 21 LTS Version Release Date (General Availability) - Java-JDK-21
- Add Blank Lines Between Each Lines in Notepad++ - NotepadPlusPlus
- Share Multiple Images in WhatsApp using Android Intent - WhatsApp
- The default interactive shell is now zsh. [macOS] - MacOS
- How to Download Microsoft Excel on Mac - MacOS
- How to URLEncode a Query String in Python - Python