How to set background image in HTML ?
Background image which we see on some websites not only makes it look good but also enhances the user experience. The background image has the potential to tell the users about the theme of the website which makes the user stick to the website. Example: If you add a background image related to traveling to your website, it clearly tells the theme about the website and the user will explore it further. It’s like when you give a background image, it invites your users to explore some other site pages too.
After reading this article you would be able to set a background image in a webpage by using only HTML and CSS.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.
There are two methods for setting a background image in an HTML file:
- By using background attribute in the tag in HTML.
- By using Inline or Internal Style Sheet.
Method 1: By using background attribute in the tag in HTML
<body background = "image_name.extension">
Property value: It holds the file of an image that you want to use as the background image.
Note: HTML 5 does not support the background attribute in the <body> tag, so we have to use CSS to add the background image to the webpage.
<div style = "background-image: url('Image_name.extension');">