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.
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
Syntax:
<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.
Example:
<!DOCTYPE html>
<html>
<head>
<title>
HTML body Background Attribute
</title>
</head>
<body background=
<center>
<h1>GeeksforGeeks</h1>
<h2>HTML <body> background Attribute</h2>
<a href="#">
It is a Computer Science portal For Geeks
</a>
</center>
</body>
</html>
|
Output:
Method 2: By using Inline or Internal Style Sheet, here we have to use the style attribute of HTML and background-image property of CSS.
Syntax:
<div style = "background-image: url('Image_name.extension');">
HTML
<!DOCTYPE html>
<html>
<head>
<title> By using Inline CSS</title>
</head>
<body style="background-image: url('image.png');">
<h2>Welcome To GFG</h2>
</body>
</html>
|
Output:
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
07 Apr, 2021
Like Article
Save Article