Logo - ProgrammingHead

How to insert Background Image in HTML using Notepad

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.

How to insert Background Image 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>

Related Topics: How to insert Background Image in HTML using Notepad

Click on Titles below to reveal the Data

How to Add Background Image to the HTML BODY

By using body{ } we are selecting HTML body by its tag name.
Between curly Braces { } we have to provice CSS Properties to customize Background Image.

style.css

body{
    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]

How to get full Image Path if 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");

    /*This will stop background from Repeating*/
	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;
    
    /*this will cover the background*/
	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;

    /*This will align background center*/
	background-position: center;
}