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>
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]
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 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;
}
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;
}
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;
}