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-to-insert-background-image-in-html-using-notepad 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) https://youtu.be/JWE1xzN5g_c 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)