[TUT] Create 100% Height & Width Hero Graphic

What is a Hero Graphic?

A ‘hero’ refers to a great graphic you see when you land on a website. An example of this can be found at

www.alexkinejara.com/camerashop/

In this tutorial I will cover how to achieve this effect in multiple ways, one of them being a simple CSS only method (my favorite!).

Method #1

To start off lets set up the HTML, it should look something like this.




   

For the CSS we are going to need to select both the html and body tag to allow the‘hero’ to be 100% the size of the window. Here is how the CSS for this will look.


html,body{  
   height:100%;  
   width:100%
}  

header#hero{  
   height:100%;  
   width:100%;  
   background-image:url('your-image-directory.jpg');  
   background-size:cover;  
   background-position:50% 50%;
}

When you set the width of a tag to 100% you are setting it to 100% the size of its parent. The html does not have a size by default, by doing this we are asking to be 100% the size of the window. We then do the same for the body so it takes over the size of the html and repeat the same for the #hero so it takes the size of the. Then we use the image as a background image so we can take advantage of the background-size:cover for responsiveness. Then we also add the background-position:50% 50%; to make sure the image is always centered. You can also play around by turning on the background-attachment:fixed; property for a different effect.

AND THAT’S IT!

(HINT: I would position absolute everything inside the ‘hero’)