How to insert Background Image in HTML using Notepad [Updated]

Hi there,
In this tutorial, we are going to learn How to insert Background Images in HTML using Notepad.
So here is the code that you can use for Inserting Images as Background in HTML.

index.html

<html>
<head>
<style>
	body{
		background-image: url("my.jpg");
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		background-attachment: fixed;
	}
</style>
</head>
<body>
	<h1>How to add Images as Background in HTML</h1>
</body>
</html>

Background Image using HTML and CSS [Step By Step]

Youtube: How to insert Background Image in HTML using Notepad [Updated]
Play Youtube Video

Use of body{ }

Using body{ } we are selecting HTML body using the Tag Name and between curly Braces { } we can use CSS Properties to add and customize Background Image.

style.css

background-image: url("imagename.jpg")

Using CSS background-image property we can add an image as a Background where inside url( ) we need to provide our Image source.
[Important: If you are using just your Image file's name and the Image File's extension as a source, then this means the Web Browser going to load the image from the same location, where your HTML File is Present.]

So if your HTML and Image files both are present in the two different locations, then you need to move your image file or you need to use Full image Path]

Ad

Need a Personal Tutor?

I am here to help you with your Programming journey. HTML, CSS, JavaScript, ReactJS, NextJS, C, C++, C#, SQL and more.

Less then 10$/hSee Plans100% Free Trial + Money Back Guaranty

How to get full Image Path [Only if your image is present at a different Location]

To get the full path of any file, you need to select that file,
Right Click -> Properties -> Security
And you can copy the full path (which going to look something like this C:/user/pc/Desktop/my.jpg)

Copy the full Path from there and paste it inside url( )
Like:

style.css

body{
	background-image: url("C:/user/pc/Desktop/my.jpg");
}

if you are not able to display the Image even after using the Full Image path, then you can try to add file:/// before your Image Path (also you can replace BackSlashes \ with Forward Slashes /)

style.css

body{
	/*background-image: url("C:\user\pc\Desktop\my.jpg");*/
	background-image: url("file:///C:/user/pc/Desktop/my.jpg");
}

Background Image is Repeating

Background images will repeat multiple times if they can fill the Whole-Body area just by using a single image.
To fix that we can use CSS Property background-repeat that we don't want our Background Image to Repeat.

style.css

body{
	background-image: url("my.jpg");
	background-repeat: no-repeat;
}

The background image is not Covering the Whole Background

If your image is not Covering the Whole Background/Body area, then you can use CSS Property background-size to fix that.
Here you can give sizes for Background Image width and Height but if you only want to cover the Whole Background, the cover works the best.

style.css

body{
	background-image: url("my.jpg");
	background-repeat: no-repeat;
	background-size: cover;
}

The background Image is not aligned Center

While resizing the Browser window or in different Screen Sizes, you have noticed that the background image is not Always aligned Center.
To align Background Images at the Center you can use CSS property background-position.

style.css

body{
	background-image: url("my.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
Ad

Need a Personal Tutor?

I am here to help you with your Programming journey. HTML, CSS, JavaScript, ReactJS, NextJS, C, C++, C#, SQL and more.

Less then 10$/hSee Plans100% Free Trial + Money Back Guaranty

Make Background Fixed [So it won't move the whole Scrolling through Page]

If you have lots of content inside your Webpage where you need to scroll, but your Background image is also scrolling, then you can make the Background Image Fixed using the CSS Property background-attachment.

style.css

body{
	background-image: url("my.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
}

Hopefully, after doing all of that you will be able to Insert Background Images using HTML in Notepad, where your Background Image is not Repeating, Its covering the Whole Background, Its always aligned center no matter in which device you try to view it and its always Fixed and not moving While scrolling.

FAQ: How to Insert Image in HTML

How to insert Background Image in HTML using Notepad [Updated]

How to add an image in HTML

To add images in HTML we need to use IMG Tag.
Where, by using the IMG tag's SRC attribute we can provide the Image Source and our Image will be available on our Webpage.

index.html

<img src="myimagename.jpg"/>

How to add background color in HTML

To add background color in HTML, we need to use CSS. Here we are going to use In-Line CSS, where you need to write CSS properties inside the Starting tag of your Tag and you are DONE.

index.html

<body style="background-color: red">
</body>
Ad

Need a Personal Tutor?

I am here to help you with your Programming journey. HTML, CSS, JavaScript, ReactJS, NextJS, C, C++, C#, SQL and more.

Less then 10$/hSee Plans100% Free Trial + Money Back Guaranty

Background-image css

background-image CSS property used to add Background Images in HTML. Where in URL() you need to provide your Image source.
Like:

style.css

body{
	background-image: url("myimage.jpg");
}

Body background image

To add Background Image to your HTML BODY, you can use CSS and select your BODY tag by using Tag name and you are DONE.
Where to add an image as Background, you need to use CSS property like background-image, and inside url() you need to provide your Image Source (Only file name and Extension if your HTML file and Image both are Present at the same location)

index.html

<html>
<head>
	<style>
		body{
			background-image: url("mypic.jpg");
		}
	</style>
</head>
	<body>
	</body>
</html>

HTML background image full screen

In order to use a background image to cover the full Screen, you can use CSS background-size property and user cover there to cover the full-screen area by Background Image.

style.css

body{
	background-image: url("my.jpg");
	background-size: cover;
}

How to insert background image in CSS

To insert a Background Image in CSS, we need to select the Body using the tag name, then we have to use CSS properties like background-image to use an image as a Background where inside url() we need to provide our Image Source.

style.css

body{
	background-image: url("my.jpg");
}
Ad

Need a Personal Tutor?

I am here to help you with your Programming journey. HTML, CSS, JavaScript, ReactJS, NextJS, C, C++, C#, SQL and more.

Less then 10$/hSee Plans100% Free Trial + Money Back Guaranty

How to insert background image in html using visual studio code

The process of inserting background images in HTML by using Any Code coder is the SAME.
You just need to select your HTML BODY by using Tag name, use CSS property background-image to insert Image as Background Image, and inside url() you need to provide you Image Source and That's all.

style.css

body{
	background-image: url("myimage.jpg");
}

HTML background image code notepad

Full HTML CODE for inserting Background Images in HTML using Notepad.

index.html

<html>
<head>
<style>
	body{
		background-image: url("my.jpg");
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		background-attachment: fixed;
	}
</style>
</head>
<body>
	<h1>How to add Images as Background in HTML</h1>
</body>
</html>
Ad

Need a Personal Tutor?

I am here to help you with your Programming journey. HTML, CSS, JavaScript, ReactJS, NextJS, C, C++, C#, SQL and more.

Just 10$/hSee Plans100% Free Trial + Money Back Guaranty
Logo