How to Insert Image in HTML using Notepad | HTML

When creating a beautiful eye-catching website, images play a huge role.
By using good images in HTML documents you will grab attention and make your website more pleasing to the eye. In this tutorial, we're going to discuss some methods you can use to insert images in an HTML using Notepad.

How to Insert an Image in HTML using Notepad [2026 Updated]

Inserting an Image using HTML IMG Tags:

IMG tags in HTML allow you to insert images into an HTML Document.
You have to provide your Image source using the HTML IMG tag’s SRC Attribute.

index.html

<img src="imagename.jpg"/>

How to provide Image Source?

To provide the Image Source, we have to use HTML IMG tag's SRC Attribute. SRC Attribute let's us use Local Image or Web Image URL to use as a Source.

How to use Image URL as Image Source

To use WEB Image URL as image source in HTML, you need to make sure that your image ends with an image extension (.jpg/.png/.gif/.jpeg).
Then you have to paste/write that IMAGE URL in the IMG tag's Attribute.

index.html

<img src="https://programminghead.com/logos/logo.png"/>

Results

How to use Local Image as Image Source?

To use a Local Image file as a Source in HTML, we can use it's FileName and Extension inside HTML IMG Tag's SRC Attribute.
If you know only the fileName of your IMAGE File, but have no idea abotu it's Extension, then you can RightClick on your IMAGE File and Click Properties/Details/Info to see the File Info, and you can Find it over there. Which will be either .png/.jpg/.jpeg/.gif.

index.html [Local File]

<img src="logo.png"/>

Results

Local Image File Not Working?
If this method is not working, then you need to make sure that your HTML file and Image file Both are present at the SAME Location/Folder/Directory.
If Your HTML file and Image file both are present at different location/Folder/Directory then this won't work.
To fix it, move your Image file to the SAME Folder/Location where your HTML File is present or use the FULL IMAGE PATH.

How to use Local Images from Different Location/Folder/Drive [FULL Image Path]

To use Image Files from different Locations of your computer, you need to provide the FULL Image Path.
To get the FULL Path of any Image FILE,
Step 1: Right Click on your Image File,
Step 2: Click Properties,
Step 3: Under the Security Tab, you will find the FULL Image Path that STARTS with your DRIVE NAME (C:/) and ends with an Image Extension (.png/.jpg/.gif), Step 4: Copy the FULL Image Path.

Once you have the FULL Image Path, use it inside your HTML IMG tag's SRC Attribute and you will be able to use the Image file from Any Location from your Computer.

index.html [Full Image Path]

<img src="C:/user/shubham/Desktop/html/logo.png"/>

Results

Related Topics: How to Insert an Image in HTML using Notepad [2026 Updated]

Click on Titles below to reveal the Data

How to insert a background image into an HTML document using Notepad

To insert a background image in HTML using notepad, we have to use CSS's background Property. Which allows us to set background images into HTML Elements.
Inside CSS's background url Property where we have to give our image file name followed by the File extension.

index.html [using Inline CSS]

<body style="background-image: url('myImg.jpg');">

style.css [using external CSS]

body{
	background: url("myImage.jpg");
}

Image Tag's Height and Width Attribute

Image tag's Height and Width attribute allows us to set a custom Height and Width to our HTML Image.
We can assign our HTML Image Height/Width in Pixels (px) or Percentage (%) or relative em/rm. It totally depends on you.

index.html

<img src="myImage.jpg" width="100px" height="100px"/>

How to add images into an HTML document using Notepad

If you want to Insert Images (Multiple Images) into an HTML document using Notepad, Then you have to use Multiple Image tags with multiple Images.
Just keep in mind, HTML Image tags don't have any closing tags. So you don't have to close it Just add multiple images as shown in the Example below:

index.html

<html>  
  <body>

   <img src="myImage1.jpg"/>
   <img src="myImage2.jpg"/>
   <img src="myImage3.jpg"/>
   <img src="myImage4.jpg"/>     

  </body>
</html>

How to create an HTML background image using full screen Notepad

Want to use a full-screen background image using Notepad?
Then use this code if you want your background image to use the full screen and also if you want to make sure that your background image always aligns at the center, and that the background image doesn't repeat. It will keep its position even on Page Scroll and ETC.

style.css

body{
    background-image: url('myimage.jpg');
    //adding image
    background-repeat: no-repeat;
    //Stoping Background from repeating
    background-size: cover;
    //Setting background to cover full width and height
    background-position: center;
    //Makes background to align center
    background-attachment: fixed;
    //Background will stay in one position on scroll
}