- #INFINITY WAR MOVIE POSTERS HOW TO#
- #INFINITY WAR MOVIE POSTERS FULL#
- #INFINITY WAR MOVIE POSTERS CODE#
We also set the backgound-position to center the background image.īoth the problems are solved. We can change this to scale the image in such a way that it will cover the screen by setting the “background-size” property to “cover”. By default, the image will be displayed in its original size. 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.
![infinity war movie posters infinity war movie posters](https://www.joblo.com/wp-content/uploads/2017/11/avengers_infinity_war_xxlg-1.jpg)
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.
#INFINITY WAR MOVIE POSTERS FULL#
Full background imageįirst download the image and save it in “img” folder.
#INFINITY WAR MOVIE POSTERS HOW TO#
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.
#INFINITY WAR MOVIE POSTERS CODE#
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.
![infinity war movie posters infinity war movie posters](https://i.ebayimg.com/images/g/tNEAAOSwNXpcnk8g/s-l400.jpg)
![infinity war movie posters infinity war movie posters](https://rukminim1.flixcart.com/image/416/416/ji4vmvk0-1/poster/6/e/t/medium-zrsa30c-the-avengers-infinity-war-movie-poster-original-imaf5xqdat8krfqp.jpeg)
This is what my project folder structure looks like: This is going to be fun, so let’s dive in.