Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to set background image in HTML ?

  • Last Updated : 07 Apr, 2021

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: 

  1. By using background attribute in the tag in HTML.
  2. 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 tag starts here -->
<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>
<!-- body tag ends here -->
  
</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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :