Explore Courses
  • Home
  • Blog
  • How to Add Background Image in HTML? [Step-by-Step Guide]

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

By Pavan Vadapalli

Updated on Jun 05, 2025 | 17 min read | 70.24K+ views

Share:

Did You Know?
What was once as simple as adding an inline attribute to set a background image in HTML has transformed into a world of possibilities with modern CSS! Now, you can layer multiple images, blend stunning gradients, and even animate backgrounds, all without touching a single line of JavaScript! Web design has evolved from static visuals to immersive, dynamic experiences.

Want to make your website visually engaging? One of the simplest and most effective ways is by adding a background image in HTML. Background images help set the tone of your site, enhance user experience, and reinforce branding. For example, a travel blog can use a scenic landscape as its background to instantly convey adventure and atmosphere.

In this step-by-step guide, you’ll learn different methods to add background images using HTML and CSS. Whether you’re building a personal blog or a professional site, we’ll show you how to create dynamic, eye-catching backgrounds tailored to your design goals.

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.

Ready to take your web development skills to the next level? Explore our range of Software development courses and start building the expertise you need to create stunning websites and excel in the tech industry today!

Adding Background Image in HTML: Different Methods

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.  

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:

If you’re looking to enhance your expertise in HTML and build visually compelling websites, here are some top-rated courses to help you get started:

Here's a table with a brief description of each method, so you can easily understand when to choose each one:

Method

Description

When to Use

Using the Background attribute (using HTML tag) This method uses the background attribute directly within an HTML tag (like <body> or <div>). It's a simple, outdated method. Use for quick, small-scale applications or simple demos. Not recommended for complex websites.
Using an Internal Style Sheet (CSS) Involves placing CSS rules within a <style> tag in the <head> section of your HTML. You can target specific elements. Ideal for single-page sites or small projects where styles are limited to that page.
Without Using CSS Simply using the background attribute in an inline style for specific HTML elements (no separate CSS file). Quick and simple for small, one-time style changes, though not efficient for larger projects.
Using Notepad (with external CSS) Writing HTML and CSS in separate files (HTML in Notepad, CSS in another file), then linking the two using a <link> tag. Best for larger projects, as it separates structure (HTML) from presentation (CSS) for maintainability.

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

1. Using Background Attribute

This is one of the oldest methods to add a background image in HTML, used directly within the <body> tag. Although it's now considered outdated and not supported in HTML5, it still appears in legacy code. 

Let’s start with 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.

Coverage of AWS, Microsoft Azure and GCP services

Certification8 Months

Job-Linked Program

Bootcamp36 Weeks

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.

The next stage is writing the HTML file. Here’s how you can do that:

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>

You can get a hang of front-end development from upGrad’s free JavaScript Basics from Scratch course. It covers variables, data types, loops, functions, and event handling. Build interactive web applications and gain the skills to create websites from scratch.

Also Read: Top 25+ HTML Project Ideas for Beginners [Source Code]

2. Using Internal Style Sheet (CSS)

This method involves writing CSS rules within a <style> tag in the <head> section of your HTML file. It allows you to add a background image to specific elements (like body, div, etc.) and customize properties such as size, repeat, and position.

Note: Modern JavaScript frameworks, such as React.js and Vue.js, often handle background images using inline styles or scoped CSS. For example, in React, you can set a background image directly on a div using a style object:

<div style={{ backgroundImage: `url('/path-to-image.jpg')`, backgroundSize: 'cover', backgroundRepeat: 'no-repeat' }}>
  {/* Content here */}
</div>

This approach helps keep styles scoped and dynamic without relying solely on traditional CSS files.

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. 

You can get a better hang of Java with upGrad’s free Core Java Basics course. It covers variables, data types, loops, and OOP principles to build strong coding skills. Perfect for aspiring developers, students, and professionals transitioning to Java.

Also Read: Structure of HTML: The Essential Guide to Building Web Pages in 2025

3. Without Using 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.

If you want to build a higher-level understanding of Javascript, upGrad’s Advanced JavaScript for All course is what you need. Learn about prototypes, scopes, classes, modules, async programming, and more to enhance your web development skills and become a proficient JS developer.

Also Read: 30+ Best HTML Project Ideas and Topics for Beginners and Professionals in 2025

4. Using Notepad

You can easily create a webpage with a background image using Notepad by writing HTML and CSS code manually and saving it with a .html extension. This is a great way for beginners to practice and understand the structure of a web page.

You have to follow these steps

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 a full-stack developer wanting to integrate AI into your workflow? upGrad’s AI-Driven Full-Stack Development bootcamp can help you. You’ll learn how to build AI-powered software using OpenAI, GitHub Copilot, Bolt AI & more.

Also Read: Difference Between HTML and JavaScript

Next, let’s look at how you can repeat the background image in HTML.

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: 

1. 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> 

2. 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> 

3. 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> 

4. 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. 

You can also enhance your front-end development skills with upGrad’s Master of Design in User Experience. Transform your design career in just 12 months with an industry-ready and AI-driven Master of Design degree. Learn how to build world-class products from design leaders at Apple, Pinterest, Cisco, and PayPal.

Also Read: Difference Between HTML and HTML 5 : Features and Advantages

Next, let’s look at how you can review the HTML file.

Reviewing the HTML File 

Once you've written your HTML code to add a background image, it's important to review the file to ensure everything displays correctly. This step involves opening the .html file in a browser, checking if the background image loads properly, and making sure the layout and text are visible and responsive. 

If the image doesn’t show up, double-check the file path, image format, and CSS syntax. Reviewing your HTML file helps catch any errors early and ensures your webpage looks polished and functions as intended.

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.

Also Read: HTML4 vs. HTML5: Key Differences, Similarities, & Features

Next, let’s look at how upGrad can help you in learning HTML.

How Can upGrad Help You Learn HTML?

HTML is the backbone of all web development. Understanding HTML gives you the power to structure content, embed multimedia, and create visually engaging layouts. It's a foundational skill that opens the door to front-end development.

upGrad offers beginner-friendly and industry-relevant courses that teach you HTML alongside other frameworks required for responsive design. With hands-on projects, mentorship, and flexible learning options, upGrad ensures you not only learn how to code but also how to apply it in real-world scenarios.

Along with the courses covered above, here are some additional free programs that can help you in your learning journey:

If you're unsure where to begin or which area to focus on, upGrad’s expert career counselors can guide you based on your goals. You can also visit a nearby upGrad offline center to explore course options, get hands-on experience, and speak directly with mentors!

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

Get started with our free software development courses, designed to build your skills and kickstart your journey in tech.

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

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.

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

Reference:
https://cloudinary.com/guides/front-end-development/css-background-image-quick-tutorial-and-3-automation-tips

Frequently Asked Questions (FAQs)

1. Why does my background image not appear when using a relative path in HTML?

2. Can I set a background image on a specific section or div in HTML?

3. How can I make my background image responsive without distorting it?

4. Why is my background image overlapping text content in HTML?

5. Is it better to use inline CSS or an external stylesheet for background images?

6. Can I dynamically change background images based on user interaction in HTML/CSS?

7. How can I add a gradient overlay over a background image in HTML?

8. Can I use SVGs as background images in HTML?

9. Why does the background image flicker or reload during navigation in single-page apps?

10. How do I fix background image not scaling correctly in different browsers?

11. Can I animate background image transitions in HTML using only CSS?

Pavan Vadapalli

900 articles published

Director of Engineering @ upGrad. Motivated to leverage technology to solve problems. Seasoned leader for startups and fast moving orgs. Working on solving problems of scale and long term technology s...

Get Free Consultation

+91

By submitting, I accept the T&C and
Privacy Policy

India’s #1 Tech University

Executive PG Certification in AI-Powered Full Stack Development

77%

seats filled

View Program

Top Resources

Recommended Programs

upGrad

AWS | upGrad KnowledgeHut

AWS Certified Solutions Architect - Associate Training (SAA-C03)

69 Cloud Lab Simulations

Certification

32-Hr Training by Dustin Brimberry

upGrad

Microsoft | upGrad KnowledgeHut

Microsoft Azure Data Engineering Certification

Access Digital Learning Library

Certification

45 Hrs Live Expert-Led Training

upGrad

upGrad KnowledgeHut

Professional Certificate Program in UI/UX Design & Design Thinking

#1 Course for UI/UX Designers

Bootcamp

3 Months

upGrad Abroad Logo
LinkedinFacebookInstagramTwitterYoutubeWhatsapp

Download our App

Bachelor programs

Top Destinations

Masters programs

Study Abroad Important Blogs