Logo - ProgrammingHead

How to Insert Image in HTML using Notepad | HTML

When creating a beautiful eye-catching website, images play a huge role.
By using beautiful and eye-catching 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 | HTML

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"/>

Related Topics: How to Insert an Image in HTML using Notepad | HTML

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
}