How to Implement a Hero Image In Your Website
January 27th, 2017
Introduction
Hero images are a growing web design trend seen in most modern websites today. It grabs the visitor’s attention due to it’s aesthetically pleasing layout. In this tutorial we will look at how to implement a simple hero image as shown above.
1. Picking An Image
Make sure your image is a high resolution photo, or it might not look so good. If you’re downloading an image off the internet, you have to make sure you own the rights to that image, especially if you’re going to upload your website to production. Makerbook, which links to different photo hosting websites, has tons of high resolution images that are under the creative commons zero license, meaning they’re 100% free to use.
2. Coding The HTML
Most hero images implemented in a web browser have a heading and tagline text in the middle of the site, a fixed transparent navigation bar at the top of the page and maybe a ghost button below your text. All of those elements will be inside of a div with an id of hero. To get the texts and button in the middle of the page, we will place them inside of a div with an id of hero-mid.
Index.Html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>Hero Image Tutorial</title>
6 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.0.0/normalize.min.css">
7 <link rel="stylesheet" href="styles.css">
8</head>
9<body>
10 <div id="hero">
11 <nav>
12 <logo>🌴 LOGO</logo>
13 <ul id="nav-menu">
14 <li>Home</li>
15 <li>About</li>
16 <li>Events</li>
17 <li>Locations</li>
18 </ul>
19 </nav>
20 <div id="hero-mid">
21 <p id="tagline">City of Champions</p>
22 <h1 id="headline">TAMPA BAY</h1>
23 <a id="ghost-btn" href="#">Learn More</a>
24 </div>
25 </div>
26</body>
27</html>3. Coding The CSS
The final step to make this all work is to code the styles.css file. We’ll split it to four parts: html & body, hero div, hero-mid div and navigation bar.
Html & Body
First we have to give the html and body tags a height of 100% so that the document takes up the full height of the browser window.
1html, body{
2 height: 100%;
3 font-family: monospace;
4}Hero Div
Next, we’ll take the hero div, enter the url for the image and keep it centered. Then we want to set the height to 100% so that it takes up the full height of the browser and also set the background-size property to cover so that the image is fully inside the window. Finally, like most hero images, an overlay is usually applied. To achieve this we will set the background-blend-mode property to overlay and then set the background-color to an rgba value.
1#hero{
2 background: url('https://images.unsplash.com/photo-1475522003475-eb5f96f1f930?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=472955c703541d5820e9f52eadee7bc4') center no-repeat;
3 height: 100%;
4 background-size: cover;
5 background-blend-mode: overlay;
6 background-color: rgba(80, 73, 48, 0.9);
7}Hero-Mid Div
For the hero-mid div we will assign property values so that the div and all of its containing elements will align to the middle of the containing hero div. After that you can style the headline, tagline and ghost button however you like.
1#hero-mid{
2 position: absolute;
3 top: 50%;
4 left: 50%;
5 right: 0;
6 transform: translate(-50%, -50%);
7 text-align: center;
8}
9#headline{
10 font-family: fantasy;
11 font-size: 4.5em;
12 letter-spacing: .09em;
13 margin-top: 5px;
14 margin-bottom: 5px;
15 color: white;
16}
17#tagline{
18 font-size: 1.5em;
19 letter-spacing: .2em;
20 margin: 0;
21 color: rgba(255,255,255,.9);
22}
23#ghost-btn{
24 color: white;
25 text-decoration: none;
26 border: 3px solid white;
27 padding: 12px;
28 display: inline-block;
29 margin-top: 30px;
30 letter-spacing: .08em;
31}Navigation Bar
Last but not least, we’ll code the navigation bar. We’ll give the nav element a fixed position in order for it to stay at the top of the document even after scrolling the page, and a z-index of 1001 so that it will stay above other elements that may have a high z-index. We’ll want the logo div on the left and the nav-menu on the right, so we will give them a float property of left and right respectively.
1nav{
2 position: fixed;
3 z-index: 1001;
4 width: 100%;
5 padding-top: 10px;
6}
7nav logo{
8 float: left;
9 margin: 13px 0;
10 padding-left: 40px;
11 color: white;
12 font-size: 1.2em;
13 font-weight: bold;
14}
15nav #nav-menu{
16 float: right;
17 padding: 0;
18 padding-right: 40px;
19}
20#nav-menu li{
21 display: inline;
22 color: white;
23 margin: 0 15px;
24 font-size: 1.2em;
25}Conclusion
And we’re done! Now this isn’t the de-facto way to create a hero image, this is just to give you an idea. You could rearrange and style the text, logo, navigation and buttons however you wish. You could even re-create the overlay blend in photoshop or gimp, it could be easier to find a suitable blend that way instead of playing with rgba values. But I’d suggest keeping the text in html for SEO purposes.
2024 © CRIS N. CANCINO |
Built with: 
& 
.