How to add background image in HTML?

How to add background image in HTML?

3 mins read1.5K Views 1 Comment
Anshuman
Anshuman Singh
Senior Executive - Content
Updated on Jul 10, 2024 20:27 IST

Images can make a page look more appealing and captivating. One of such ways for making the page more attractive is adding background image to it. You can add backgrond image in HTML by using two methods: Background attribute (Html Tag) and Internal Style Sheet (CSS).

2022_12_MicrosoftTeams-image-171.jpg

In this article, we will explore how to add background image in HTML. But, before we begin exploring different methods to add background image in HTML, let’s go through the list of topics listed under the table of contents (TOC) that we will cover in this blog.

You can also explore: What is HTML?

Table of content (TOC)

How to add background image in HTML

You can add background image in HTML using two methods:

  • Background attribute (Html Tag)
  • Internal Style Sheet (CSS)

Let’s explore each of these methods in detail in the next section.

You can also explore: HTML Online Courses & Certifications

Background attribute

If you want to add background image in HTML using background attrubute, perform the following steps:

  1. Open the HTML file in text editor.
  2. Within the starting <body> tag in your Html file, type <Body background=” “>
  3. Give the path of the image we want to add. (Example, <Body background=”C:\Users\anshuman.singh\Downloads\infoedge.jpg “>
  4. Save the Html file in the text editor and run the file.

Let’s go through an example to understand the steps in a better way. Here’s the HTML file:

2022_12_HTML-code.jpg

When you will execute this code, the output will be something like this:

2022_12_output.jpg

Note:C:\Users\anshuman.singh\Downloads\infoedge.jpg“, is the image path where the image was saved in my device. Replace the path as per the location of the file stored on your device. And, if you want to add image from internet, use the image URL to do so.

Explore the world of HTML/CSS with online courses from leading colleges. Enroll now to advance your career in web development.

Internal Style Sheet (CSS)

If you want to add background image using internal style sheet (CSS), perform the following steps:

  • Open the HTML file in text editor.
  • Following the closing of the title tag in the HTML document, define the starting and closing tags of the <style> tag.
  • Type the element body in the style tag and, then type the backgroud image property.
  • Save the Html file in the text editor and run the file.

Let’s go through an example to understand the steps in a better way. Here’s the HTML file, as per the above steps:

2022_12_2nd34.jpg

When you will execute this code, the output will be something like this:

2022_12_6879.jpg

Note: In the above HTML code, we have used an image from internet, by using the image URL.

You can also explore these articles:

HTML Lists: Ordered and Unordered Lists Explained with Examples HTML Formatting: HTML Tags for Text Formatting (With Examples)
HTML Horizontal Line – Learn How to Use the hr Tag in HTML HTML Underline Tag – Understand u Tag with Examples
Learn How to Write HTML Comments Creating HTML Links – Tutorial With Examples
HTML Heading and Paragraph Tags Explained With Examples Creating HTML Tables (Tutorial With Examples)

How to repeat background image in HTML?

If the background image is relatively small than the page or the element, it will repeat vertically and horizontally until it reaches the bottom of the page.

Here’s an example:

2022_12_repeat.jpg

Note: If you don’t want to background image to repet itself, set the background repeat property to no-repeat.

How to cover the entire element with the background image in HTML?

In order to cover the entire element with the background image, you can set the background-size property to cover. And, if you don’t want that your image should stretch, you can set the background-attachment property to fixed. This will cover the entire element or page, with no stretching.

Let’s go through an example to understand it in a better way:

2022_12_entire-element-2.jpg

The output will be something like this:

2022_12_ENTIRE-ELEMNT.jpg
Must Explore:

All About CSS Syntax
All About CSS Syntax
Have you ever wondered how websites get their unique styles? It’s all because of CSS syntax, the rules web designers follow to style web pages. Let’s understand more! CSS syntax...read more

How to Link CSS to HTML
How to Link CSS to HTML
Have you ever wondered how to make your website visually appealing and well-structured? Linking CSS to HTML is the key to achieving this. Let’s understand more! Learning how to Link...read more

How to Create HTML Forms – Tutorial with Examples
How to Create HTML Forms – Tutorial with Examples
HTML forms or web forms are a powerful medium for interacting with users. They have interactive controls for submitting information. Web forms enable us to collect data or personal information...read more

HTML Tags: Essential and Basic Tags for Creating an HTML Document
HTML Tags: Essential and Basic Tags for Creating an HTML Document
HTML tags form the basic structure of any webpage or HTML document. In this blog, we will discuss some essential and basic HTML tags with examples. HTML tags form the...read more

FAQs

How do I add a background picture in HTML?

You can add backgrond picture in HTML by using either Internal Style Sheet (CSS) or Background attribute (Html Tag).

How to repeat background image in HTML?

To repeat a background image in HTML, you can use the CSS

background-repeat
Copy code
property.

About the Author
author-image
Anshuman Singh
Senior Executive - Content

Anshuman Singh is an accomplished content writer with over three years of experience specializing in cybersecurity, cloud computing, networking, and software testing. Known for his clear, concise, and informative wr... Read Full Bio

Comments

(1)

html code for put a background image

Reply to esh fdo