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]

Updated on 13 November, 2024

68.75K+ views

• 15 min read

Table of Contents

What is HTML?
Two Methods to Add Background Image in HTML
How to Add Background Image in HTML Using Background attribute?
How to Add Background Image Using Internal Style Sheet (CSS)?
Reviewing the HTML File 
How to Insert a Background Image in HTML Without CSS?
How Do you Insert a Background Image in HTML Using Notepad?
How to Repeat Background Image in HTML?
Conclusion

Images can be added to a website in a variety of ways to make it look interesting & appealing. The addition of a background image is one such method. Images are essential when building a website or writing a blog post because they help make the content more appealing and understandable. Without images, a blog or website becomes boring, and readers begin to drift away. The practical impact of background images on a web page's interactivity is also significant.

The background image attribute found inside the <body> tag is the most popular and straightforward method of adding a background image. In this blog, we will learn how to add background images in HTML and how to use HTML and CSS to add background images to websites.

What is HTML?

HyperText Markup Language, or HTML, 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.

If building rich, useful web applications has always been your dream, whether you're a junior Front-End developer or a senior Full-Stack developer with a comprehensive Web Designing and Development course, you'll learn everything about creating web pages using HTML, CSS, and JavaScript.

Two Methods to Add Background Image in HTML

We can add HTML background image to be displayed on a web page using the following different two methods:

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

How to Add Background Image in HTML Using Background attribute?

Follow the steps to learn how to put an image in the background in HTML:

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

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 

It's located in the window's lower-right corner. This saves the text file as an HTML file.

With our Full Stack Certification, you'll learn more about topics and techniques through independent and group projects, get personalized feedback, work with MAANG experts as mentors, hone your skills in multiple hackathons spread throughout the programme, and receive intensive interview preparation and career launch support.

Check out our free technology courses to upskill yourself

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

How to Add Background Image Using Internal Style Sheet (CSS)?

Follow the following steps if you want to know how to add a 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 HMTL 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.

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

How to Insert 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.

How Do you Insert a 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 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.

Conclusion

To include a background image in HTML, use the background-image property. The purpose of this article is to add an HTML background image. Either the entire web page or a single HTML element can have the background image added. Additionally, different CSS properties like background size, background attachment, or background repeat can be used to alter the background image. We have also given some insight into how to manipulate the background image using these properties of the background photo.

Now, you must be clear on how to add an image as background in HTML and how to insert a background image in HTML from the local folder.

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 out the Executive PG Programme in Full Stack Development from 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

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

Frequently Asked Questions (FAQs)

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.

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.

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

RELATED PROGRAMS