Next, let’s solve the image scaling problem. Refresh the browser and you will see that the white gap is gone and there is no scrollbar now. Let’s remove the margin by setting it to 0 on the body: That’s why we see that gap around the image. The body element by default has some margin to it.
Let’s refresh the page in the browser and see the result.Īctually, we are missing one detail here. takes us one folder up in the folder structure. So we need to go one folder out and then reference the path. at the beginning of the path? See, we are referencing the image file which is in the "img" folder from our styles.css file which is in the "css" folder, right? Notice how we are referencing the image file: url("./img/infinity-war-wallpaper.jpg"). We set the background image using the “background-img” property. In our CSS file, we set the width and height to 100% so that it covers the entire screen. But for this specific purpose we will create a div, make that div cover the entire screen, and then set the background image on that div using the "background-image" CSS property.Īs you can see, we created a div and gave it a class in our HTML file. We normally use the element to include images in HTML. Note: All rights of the image belongs to Marvel Studios, used here only for learning purposes. Full background imageįirst download the image and save it in “img” folder.
I would recommend starting here: How to Make a Burger in HTML - A Beginner Tutorial. If you don’t understand the above code, then you are probably coding in HTML for the first time. Our stylesheet “styles.css” goes inside the CSS folder, the custom font file that we will download will go inside fonts folder, the background image that we will download will go inside the img folder, and our HTML code resides in the “infinity-war.html” file. This is what my project folder structure looks like: This is going to be fun, so let’s dive in. How to load custom fonts from a local file.How to give a full-screen background image to your page.Here are some important concepts you will learn while making this poster:
In this post, we are going to make a movie poster of “Avengers: Infinity War” in HTML and CSS. By Kunal How to make a poster for Avengers: Infinity War in HTML and CSS