Скачать или смотреть How to insert Background Image in HTML using Notepad [Updated]

Hello guys,
In this video Tutorial, we are going to learn, How to insert background image in HTML using Notepad

Lets open Notepad (You can also use Other Text or Code Editors like Notepad++, Sublime, and Visual Studio Code)

Source CODE: https://www.programminghead.com/how-t...

Inside Notepad, you need to write your HTML Syntax First
Now we need to Save this Untitled File

For that Select File
Save and Pic a location where you want to save this File
Let's save it inside the Desktop
Give it a name followed by the .html Extension

Index is my file's name and .html is my HTML File's Extension

Click Save and you can see now we have HTML File available inside the Desktop

Next, we need to add an Image as a Background, for that we need to use CSS
There are so many different Ways to Use CSS in HTML (Like Inline CSS, Internal CSS and External CSS)
In this tutorial, we are going to use Internal CSS

Between HEAD tag's Starting and Closing tags, we need to include Style Tags
and between these Style Tags, we can use CSS Properties.

We can select HTML Elements by using ID, Class, and Tag names

Let's use the Tag name to select our HTML Body, Between these Curly Braces, we need to write our CSS Properties.

Let's add the background-color Property there and Set the background color to RED

This will change our Web Page's Background color from white to RED.

Now instead of using the Backgorund-color property, we are going to use the background-image Property to add an Image as a Background

and inside url() we need to provide our Image Source

If your Image file and your HTML file, both are present at the same location
then you can simply use the Image name followed by the Image Extension.
If you are not able to see the Extension there
then you need to Select your Image
Right-click - Properties and here you can find your Image Type or Image Extension

If you are using Images from different Locations then you need to provide the FULL path here (BTW we have a Dedicated Video for Inserting Images from different Folder ETC so in the Description you can find the Link and Watch that video but here I am going to assume that your Image file and HTML file, both are present at the Same Location)

Now save the HTML file and run your HTML file inside a Web Browser

As you can see here
We have multiple Images there, Because this single image is Unable to fill the whole background, Because of that it's repeating the Background image multiple times to fill the whole Area.

If you don't want that, then you can use CSS Property
background-repeat: no-repeat;
This will make sure that our Background image is not Repeating

Save it and Refresh the Browser

We have fixed the Repeating Image issue but there are some blank spaces that we need to fill
So to cover the whole Body area we can use CSS Property
background-size:
Here we can provide Background image Size.
Like I want to use 100% of the Width but only 10% Height
Save it and Refresh
Now you can see here, my Image covers 100% of the Width but only covered 10% of the height
So if we also use 100% here this will cover the whole body area right?
Correct but its gonna stretch our image to fill the Area on different Screen sizes
which can mess up the Aspect Ration of our Image

To fix that we can use auto height or auto width according to different Viewports or we can use cover there

This will automatically position the background image to fill or cover the whole area
and it won't mess up the image Aspect ration

Now the issue is, on some screen sizes the background image is not aligned centered
To fix that we can use
background-positon: center;

Now on every screen size, our Background going to be aligned at the Center.

this is looking nice
But if we increase the Page Content like this

You will see that now our Background is also scrollable

If you don't want your background to scroll
Then you can use CSS Property
background-attachment: fixed;
This will fix that issue

Thank you so much for watching this Video
If you have any issues, please let us know in the Comment Section
Thanks again for Watching have a Good Day



Links:
Unable to load Images?
Video Link (How to insert Audio from Different Locations)
   • Audio in HTML - How to Insert audio withou...  
You can still use this video to understand how you can insert Images from different folder (So the process of adding Images and Audio are basically the same)


Video Content
0:00 Video Introduction (How to insert Audio in HTML using Notepad)
0:15 HTML Syntax
1:06 Using Internal CSS for Background
1:24 Selecting BODY using Tag Name
1:49 Using CSS background-image property
2:12 Getting Image Extension
2:47 Stop background Image from repeating
3:14 Filling the whole background
4:25 Aligning Background Image
4:57 Making background Fixed (Non Scrollable)