Home
Blog
Software Development
How to Add Background Image in HTML? [Step-by-Step Guide]

How to Add Background Image in HTML? [Step-by-Step Guide]

Q: 1. How to stretch background images in HTML?

To avoid using the same image twice, you can stretch the background image. The background-size and background-attachment CSS properties are used to achieve this.

Q: 2. How to make an image link in HTML?

Use both the <img> and <a> tags with the href attribute to link to an image in HTML. A link can be added using the a> tag, and an image can be used on a web page using the <img> tag. Add the image's URL to the src attribute of the image tag.

Q: 3. How to avoid the background image from repeating?

Specify no-repeat in the background-repeat property or the background shorthand property to prevent background images in HTML from repeating. Using the 'background-repeat' property, the background image is set to 'no-repeat'.

Q: 4. What is the correct HTML tag for adding a background?

The correct HTML tag for adding a background image directly is the <body> tag, often with the background attribute. However, it’s more common to use CSS to set the background image using the background-image property in the <style> section or an external stylesheet.

Q: 5. How do I set an image as my background in an HTML table?

To set an image as the background in an HTML table, you can apply CSS to the <table> element. By using the background-image property, you can set an image as the background for the table, affecting the entire table’s visual appearance.

Q: 6. How do I change the background in HTML?

To change the background in HTML, the most common method is to use CSS. By modifying the background-color or background-image properties, you can change the background color or set a new image as the background for the entire page or specific elements.

Q: 7. How do I add a background to an image?

To add a background to an image in HTML, you typically create a container around the image and apply the background using CSS. This allows you to set a background color or image for the container while placing your image inside it.

Q: 8. How can I put a background image on a frame in HTML?

To add a background image to an HTML frame (like an <iframe>), you can target the <iframe> element using CSS. By applying the background-image property, you can set a background image behind the content displayed in the frame.

Q: 9. Is it possible to add multiple background images in HTML using CSS?

Yes, it is possible to add multiple background images in HTML using CSS. You can specify multiple images by separating each URL with a comma in the background-image property. This allows you to layer different images on top of each other, creating complex, dynamic background effects.

Q: 10. How do I make the background image cover the entire screen in HTML?

To make the background image cover the entire screen, use CSS properties that control the size of the image. Specifically, you can use the background-size property with a value of "cover," which ensures the image stretches to fill the entire screen while maintaining its aspect ratio.

By Pavan Vadapalli

Updated on Mar 28, 2025 | 15 min read | 69.6k views

Table of Contents

If you’re looking to give your website a visually appealing boost, one of the easiest ways to do this is by adding a background image. Images can be added to a website in various ways to make it look interesting and appealing. They are essential when building a website or writing a blog post because they help make the content more appealing and understandable.

Adding images, especially background images, plays a crucial role in web design by enhancing the visual appeal and user experience of a website. A well-chosen background image can help convey mood, establish branding, or support the content of the page. When you add background image in HTML, it gives you the flexibility to create unique and visually engaging designs.

In this step-by-step guide, we will explore various methods to add background image in HTML, including using HTML attributes and CSS. Understanding these techniques will allow you to customize your web pages and create attractive, dynamic backgrounds suited to your site's aesthetic and purpose.

By the end, you'll be equipped with the knowledge to customize your web pages and create dynamic, aesthetically pleasing backgrounds that suit your site's purpose.

Explore our range of Software development courses to unlock your potential and start building the skills to excel in the tech industry today!

What is HTML?

HTML or HyperText Markup Language, is a common markup language for building a webpage's basic framework and adding features like text, graphics, tables, forms, and so forth. HTML is a powerful coding language for creating websites. It is combined with CSS while designing and constructing websites. Therefore, it should go without saying that learning HTML is a necessary first step if you want to succeed in the field of Web development.

Different Methods to Add Background Image in HTML

The background image attribute found inside the <body> tag is the most popular and straightforward method of adding a background image. We can add HTML background image to be displayed on a web page using the various methods:

Using the Background attribute (using HTML TAG)
Using an Internal Style Sheet (CSS)
Without Using CSS
Using Notepad

Let’s explore these 4 methods to add background image in HTML in detail:

1. How to Add a Background Image in HTML Using Background attribute?

Follow the steps to learn how to how to add a background image in HTML:

a) Setting up your files

Step 1: Create a folder to hold your HTML file and background  

Make a folder on your computer with a name you can recall later.

Although the folder name is completely up to you, it's best to get into the habit of giving your files and folders recognizable, short, single-word names when working with HTML.

upGrad

Professional Certificate Program in Cloud Computing and DevOps

Coverage of AWS, Microsoft Azure and GCP services

Certification8 Months

View Program

upGrad KnowledgeHut

Full Stack Development Bootcamp - Essential

Job-Linked Program

Bootcamp36 Weeks

View Program

Step 2: Put the background image into the HTML folder 

Put the background image in the HTML folder if you want to use it.

Use a higher-resolution image as your background if you aren't too concerned about making sure your website will function well on older devices with slower internet connections. To make any text on top of the background image easier to read, choose a simple image with subtle, repetitive patterns.

Step 3: Open a text editor or HTML editor 

Simple text editors like NotePad on Windows or TextEdit on Mac can be used to create HTML files. Another option is to use a WYSIWYG (what-you-see-is-what-you-get) HTML editor like Adobe Dreamweaver.

At the top of the page, if you're using a WYSIWYG editor, select the option to open a new HTML file.

Step 4: Click File It’s in the menu bar at the top of the page

Step 5: Click Save as (Notepad) or Save (TextEdit) 

It's listed below in the file menu. On a computer, select Save As from the "File" drop-down menu. On a Mac, select Save from the drop-down menu.

Step 6: Type a name for the HTML document 

The first page of a website is typically referred to as the "index," but you can name the page whatever you like. In the text box next to "File Name," enter the file's name.

Step 7: Change the file type to an HTML document

If you're working in a WYSIWYG editor, all you have to do is save the document. Use the steps below to save the document in HTML format if you're creating HTML in NotePad or TextEdit.

Step 8: Click Save 

The “save” option is located in the window's lower-right corner. This saves the text file as an HTML file.

Ready to dive into the world of web development? Our Full Stack Development Courses will equip you with the skills to build modern, interactive web applications from scratch!

(b) Writing the HTML File

Step 1: Type <! DOCTYPE html > at the top of the HTML document

Open and closed tags make up HTML code. Every properly written HTML page should begin with <!DOCTYPE html>. This indicates to a web browser that the file is an HTML file.

Step 2: Write <html> in the next line

This is the first tag in your HTML code. This instructs the browser that your HTML code begins here.

Step 3: Type <head> in the next line 

This is the first tag in the HTML document's Head section. The head contains meta information that the web browser does not display. This section contains information such as the page title, as well as Cascading Style Sheets (CSS) that format the look of the HTML code.

Step 4: Type <title> Page Title </title> 

This is the HTML code that contains your web page's title. The "<title>" tag is the first tag in the HTML code for the Page title. The closing tag is "</title>" of the tag. Replace "Page Title" with whatever title you want to give your HTML page. This text will appear at the top of the web browser in the browser tab.

Step 5: Type </head> in the next line 

This is the tag that ends your HTML document's head. If you want to add any additional information or style sheets to your HTML document, place them after the "<head>" opening tag and before the "</head>" closing tag.

Step 6: Type <body> in the next line 

This is the opening tag for your HTML document's body. The body contains all of your website's visual elements. This includes text, images, buttons, and other visible web page elements.

Step 7: Type <div style=“background-image : url ( ‘ [ image url ] ‘ ); “ > in the next line 

This is the HTML tag for including a background image on your website. Replace "[image url]" with the actual URL of the image to be added. This can be the online server location of an image or the local location of an image on your computer.

You can also use CSS to set a background image.

When you use a filename that does not include a file path or URL (for example, background-image: url("background.png");), the web browser will look for the named image in the web page folder, if the file is in a different folder on your file system, you must include the full path to that file.

Step 8: Finish the rest of your HTML document 

If you want to include other HTML elements on your web page, such as text, images, videos, links, buttons, and so on, make sure to put them in the "Body" section of your HTML document.

Step 9: Type < / body > in the last line 

This is the tag that wraps your HTML document's body. When you've finished adding all of the HTML elements you want to include in your document, add this tag at the end.

Step 10: Type < / html > at the very end 

This is the tag used to wrap your HTML document. Put this tag on the last line.

Step 11: Save the HTML file 

When you are finished, click File and then Save to save your work. Your entire HTML document should resemble this:

<!DOCTYPE html> 
<html> 
<head> 
<title>Page Title</title> 
</head> 
<body> 
<div style="background-image: url('https://www.website.com/images/image_background.jpg');"> 
</body> 
</html>

Check out our free technology courses to upskill yourself.

2. How to Add Background Image in HTML Using Internal Style Sheet (CSS)? :

Follow these steps if you want to know how to add background image in HTML using CSS: 

Step 1: Create an HTML document 

To create an HTML document, follow the procedures described in Part 2. An open and closing HTML tag, an open and closing head tag, and an open and closing body tag should all be present in your HTML document.

To add a background image, you do not need to use the HTML tag. This section demonstrates how to set a background image using CSS rather than HTML.

Step 2: Type < style > in the head of the HTML document

The first tag in cascading style sheets is this one (CSS). Before the "</head>" tag and following the "<head>" tag.

You can also create your CSS in a separate CSS document and link it to your HTML document as an alternative. 

Step 3: Type body { in the next line 

The CSS code that will style the body of your HTML document begins here.

Step 4: Type background-image:  url (‘ [ image url ] ‘ ); in the next line 

The background image to be used is specified in this line. The actual URL of the image you want to use should be substituted for the text "[image url]".

A filename without a file path or URL, such as background-image: url("background.png");, causes the web browser to search for the named image in the web page folder. You must include the complete path to the file if it is located in another folder on your file system.

Step 5: Type background-repeat:  no-repeat; in the next line 

By using this line, the web browser is instructed to only show the image once rather than repeatedly.

Step 6: Type background-size:  cover; in the next line 

This line instructs the web browser to use the image as the background for the entire page.

Step 7: Type} at the end of the “Body “section of your HTML 

Make sure to include any additional CSS lines that have an impact on the HTML document's Body at this time. To close the "Body" section of your CSS, enter the symbol "}" in the final line.

Step 8: Type < / style > at the end of your CSS 

Write "</style>" at the end once you have included all the CSS you want to. Your CSS is closed by this tag.

Step 9: Save the HTML file 

When you are done, click File, followed by Save, to save your work.

Your entire HTML file should resemble the following:

<!DOCTYPE html> 

<html> 
<head> 
<title>Page Title</title> 
 
<style> 
body { 
background-image: url("https://www.website.com/images/image_background.jpg"); 
 background-repeat:no-repeat; 
 background-size:cover; 
}  
</style> 
</head> 
<body> 
 
</body> 
</html>

Explanation:

The <style> tag within the <head> section is where the internal style sheet is defined.
The background-image property in the body selector specifies the path to the image.
Background-size: cover; ensures the image covers the entire background area.
Background-position: center; centers the image in the viewport.
Background-repeat: no-repeat; prevents the image from repeating across the page.

3. How to Add a Background Image in HTML Without CSS?

The steps listed below must be followed if we want to add a background image using the Background attribute in an HTML document. We can quickly view an image on a web page by following these steps:

Step 1: To begin, enter the HTML code into a text editor of your choice or open an existing HTML file to insert the background attribute.

<!Doctype Html> 
<Html> 
<Head> 
<Title>

Add the Background image using the background attribute

</Title> 
</Head> 
<Body> 
upGrad   <br> 
Html Tutorial   <br>

This page helps us to understand how to show the background image of a web page. <br>

<br>

And this section helps you to understand how to add a background image in Html page using the background attribute.

</Body> 
</Html>

Step 2: Place the cursor inside our HTML document's opening <body> tag. After that, type the background attribute as it appears in the block below:

<Body background=" ">

Step 3: The image path for the one we want to add must then be provided. Therefore, enter the image's path in the background attribute. Type the following path if our image is located in the same directory as the HTML file:

<Body background="filename.extension">   
<Body background="image.jpg"> <br>

If our image is located in another directory, be sure to enter its correct path so that the browser can easily read it, as explained in the block below.

<Body background="/home/ishan/Desktop/images/image.jpg">

If our image is available online, we can also add it using the URL provided in the block below.

<Body background="https://images.unsplash.com/photo-1540270776932-e72e7c2d11cd?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MTh8fHxlbnwwfHx8fA%3D%3D&w=1000&q=8">

Step 4: In the text editor, we must finally save the HTML file or HTML code.

<!Doctype Html>   
<Html>      
<Head>       
<Title>

Add the Background image using background attribute   

</Title>   
</Head>   
<Body background="https://images.unsplash.com/photo-1540270776932-e72e7c2d11cd?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MTh8fHxlbnwwfHx8fA%3D%3D&w=1000&q=80 
">    
upGrad   <br>   
Html Tutorial   <br>
This page helps us to understand how to show the background image of a web page. <br>
<br>   
And this section helps you to understand how to add the background image in an Html page using the background attribute.   
</Body>   
</Html>

Output:

upGrad
Html Tutorial
This page helps us to understand how to show the background image of a web page

And, this section helps you to understand how to add the background image in a Html page using the background attribute.

4. How to Add Background Image in HTML Using Notepad?

You have to follow the following steps if you want to know how to insert a background image in HTML using Notepad:

Step 1: Open the Notepad text editor

Use the Windows Start button to search for Notepad. From the Search Results, pick Notepad and click twice. After that, your notepad text editor will launch.

Step 2: Writing HTML Image Syntax

Create an HTML image syntax that requires us to use HTML IMG tags to add and display images inside of our HTML webpage.

<img src="imageFileHere"/>

Step 3: Type the name of your image file

For assigning our image files' names, followed by the image extension, we must use SRC.

<img src="myImage.jpg"/>

Step 4: Save your HTML file

Use the File menu in the Notepad text editor to save your HTML file, or press Ctrl+S to save your HTML file directly in Notepad.

Step 5: Run your HTML file in a browser

Launch the web browser and run your HTML file.

Are you ready to unlock the power of Python? Join our Python programming course for beginners and embark on a journey of endless possibilities. Start coding today!

How to Repeat Background Image in HTML?

Repeating a background image can be useful for creating textures or patterns. By default, background images in CSS repeat both horizontally and vertically. However, you can control this behavior using the background-repeat property. Here’s how to do it:

A. Default Repeat

To repeat a background image both horizontally and vertically, you can use the following CSS:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <title>Repeat Background Image</title> 
  <style> 
    body { 
      background-image: url('path/to/your/image.jpg'); 
      background-repeat: repeat; /* Default behavior */ 
    } 
  </style> 
</head> 
<body> 
  <h1>Repeating Background Image Example</h1> 
</body> 
</html>

B. Horizontal Repeat Only

To repeat the background image only horizontally:

<style> 
  body { 
    background-image: url('path/to/your/image.jpg'); 
    background-repeat: repeat-x; /* Repeats the image horizontally */ 
  } 
</style>

C. Vertical Repeat Only:

To repeat the background image only vertically:

<style> 
  body { 
    background-image: url('path/to/your/image.jpg'); 
    background-repeat: repeat-y; /* Repeats the image vertically */ 
  } 
</style>

D. No Repeat

To prevent the background image from repeating:

<style> 
  body { 
    background-image: url('path/to/your/image.jpg'); 
    background-repeat: no-repeat; /* Prevents the image from repeating */ 
  } 
</style>

Adding and controlling background images using CSS enhances the design of your webpage. Whether using an internal style sheet or managing image repetition, these techniques provide flexibility and ease in creating visually appealing web pages.

Reviewing the HTML File 

Step 1: Right-click the HTML document 

To the right of it, a pop-up menu is displayed.

Step 2: Select Open with 

A list of applications that can open HTML is shown in this.

Step 3: Select the web browser of your choice. You can use any web browser to view the HTML.

Step 4: Review the HTML file 

Make sure everything in the file looks correct by going through it one last time.

The HTML file may have been saved as a a.txt or rtf file rather than an HTML document if you see the HTML code when the browser opens instead of the background image. You might want to try using a different text editor to edit the HTML file.

Step 5: Make edits to the HTML file

Place the cursor in the space between the <body> and </body> tags in the text editor window, and then type Hello world!. To see the text on top of the background image, reload the browser window.

Conclusion

Through this article, we explored how to add a background image in HTML and enhance your web page's design. By now, you must have been equipped with the knowledge to customize your web pages and create dynamic and pleasing backgrounds for your website that complement your site's overall aesthetic.

Whether you choose to apply a background image to the entire page or specific elements, CSS properties like background-size, background-attachment, and background-repeat allow for further customization, giving you full control over the image’s appearance.

Understanding these properties lets you take full control over your background images, significantly improving the visual appeal and interactivity of your site. Mastering the ability to add and manipulate background images is essential for any web designer looking to create engaging, visually compelling websites that attract and retain users.

If you are interested in pursuing a full-time career in website development, then the Software Engineering Course is the best course for you. However, if you are looking for a course that focuses more on the niche of Stack Development, check our popular programs like:

Executive PG Programme in Full Stack Development from IIITB.
AI-Powered Full Stack Development Course by IIITB

Discover our top-rated Software Engineering courses designed to equip you with the latest industry skills and accelerate your career growth.

Explore our Popular Software Engineering Courses

Master of Science in Computer Science from LJMU & IIITB	Caltech CTME Cybersecurity Certificate Program
Full Stack Development Bootcamp	PG Program in Blockchain
Executive PG Program in Full Stack Development
Software Engineering Courses

Master the most sought-after software development skills with our expert-led courses, tailored to help you stay ahead in a fast-evolving tech landscape.

Explore Our Software Development Free Courses

Fundamentals of Cloud Computing	JavaScript Basics from the scratch	Data Structures and Algorithms
Blockchain Technology	React for Beginners	Core Java Basics
Java	Node.js for Beginners	Advanced JavaScript

Enhance your software development knowledge with our popular articles, offering insights and tips to boost your expertise and career.

In-Demand Software Development Skills

JavaScript Courses	Core Java Courses	Data Structures Courses
Node.js Courses	SQL Courses	Full stack development Courses
NFT Courses	DevOps Courses	Big Data Courses
React.js Courses	Cyber Security Courses	Cloud Computing Courses
Database Design Courses	Python Courses	Cryptocurrency Courses

Discover the best HTML tutorials and start building strong web development skills from the ground up!

Explore the Best HTML Tutorials

HTML Syntax	HTML Comments	HTML Elements	HTML Attributes
HTML Semantic	HTML Head	HTML Paragraphs	HTML Symbols
HTML Images	HTML Forms	HTML Canvas	HTML Editors
View All HTML Tutorials