Full-screen page with centered navigation tutorial

Table of Contents

Some websites use this very nice feature of being stretched to full-screen no matter if they contain any content. It often comes side-by-side with full-screen photo on the background, some times also using a blur effect. However, our goal for today will be creating this full-screen page with photo on background and centered navigation. This can be great landing page for your own pages. Let’s get to work.

HTML

As first, we will set up our HTML structure and then will work in CSS stylesheet. The HTML code is very simple. After creating the base structure for HTML5, we will create a div element with class “wrapper” and inside it we will nest nav element – for navigation – with unordered list. Inside this list we will put couple of list items with links.

Result:

<!doctype html>
<html lang="en">
 <head>
 <title>Full-screen page with centered navigation tutorial</title>
 <meta charset="utf-8">
 </head>
 <body>
 <div class="wrapper">
 <nav role="navigation">
 <ul class="navigation">
 <li><a href="#">Home</a></li>
 <li><a href="#">About</a></li>
 <li><a href="#">Portfolio</a></li>
 <li><a href="#">Contact Me</a></li>
 </ul>
 </nav>
 </div>
 </body>
</html>

– note: The “role” attribute in nav element has no use for use. It is there just for semantic meaning. However, if you want to select this attribute with your CSS, you can use [role=”navigation”] {} selector.

With this HTML code set up, we can start working on styling our page through CSS stylesheet.

CSS

To begin, we will declare a special rule that will apply to all elements (universal selector) with property box-sizing set to border-box. Thanks to this property the padding will not affect the width and height of elements.

Result:

* {
 -webkit-box-sizing: border-box; /* for older Android browsers*/
 box-sizing: border-box;
}

Now comes the main magic of our full-screen page. We will create a rule for html and body elements with width and height properties set to 100%. This will force them to always stretch to full size of the browser.

Result:

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

Next thing is styling our div with class “wrapper”. We will position it absolutely, set top and left properties to 0, then set width and height to 100% as we did in case of html and body. The last step will be applying background rule with our image and background-size set to cover. For image I used a hi-res picture of skater from Gratisography.com.

Result:

.wrapper {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: url(http://www.gratisography.com/pictures/109H.jpg) no-repeat center center fixed;
 background-size: cover;
}

– note: By setting image to center center fixed we will position the image on the center of the page with fixed positioning. This, with size set to cover, will create full-screen background image on any resolution.

Now we will quickly set up few things for our nav element. You can select this element simply by “nav” or by [role=”navigation”]. The styles are absolute positioning and setting top to 50%. This will vertically center our navigation. Last is width property with value 100%. By setting width to 100% we can use flex to center our navigation horizontally later.

Result:

nav /* role["navigation"] */ {
 position: absolute;
 top: 50%;
 width: 100%;
}

Now it is time to style a bit the navigation (unordered list). We will set display to flex (along with prefixes), then set justify content to center and, of course, list-style-type set to none.

Result:

.navigation {
 display: -webkit-box;
 display: -moz-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;
 justify-content: center;
 list-style-type: none;
}

Next and last thing is to style the anchor tags (links) in our navigation. First is setting display to block. Since I want to use padding and wrap the text inside light border to create “ghost” button, I used relative positioning along with top set to -2em. The reason for this is that top padding will move text inside the buttons lower, so they will no longer be at exactly 50% of page. To fix it we will subtract the padding with some reserve (font size and border width) from top and move it a bit up manually.

Result:

.navigation li a {
 display: block;
 position: relative;
 top: -2em;
 padding: 1em 2em;
}

After this, we will continue in styling the links by setting margin to 0 and 1em to create some space between the buttons (links). Then set the color of links to #fff (white), border to 1px solid #fff (white). For font I chose Railway available on Google fonts with sans-serif as fallback. Font size will be 110%. To remove the underline, we will set text-decoration to none and also create a transition for hover state.

Result:

.navigation li a {
 display: block;
 position: relative;
 top: -2em;
 padding: 1em 2em;
 margin: 0 1em;
 color: #fff;
 border: 1px solid #fff;
 font: 300 110% 'Raleway', sans-serif;
 text-decoration: none;
 transition: all .5s ease-out;
}

As last thing we will create some effects for hover and focus (focus mainly for mobile devices) states. These effects will be created by changing color and border-color to #000 (black).

Result:

.navigation li a:focus,
.navigation li a:hover {
 color: #000;
 border-color: #000;
}

With this, we are done! We achieved our goal and created beautiful full-screen page with centered navigation. Feel free to use it as you want and share it.

Codepen example:

https://codepen.io/d3v3r0/pen/Eubco

If you liked this article, please subscribe so you don't miss any future post.

If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂

By Alex Devero

I'm Founder/CEO of DEVERO Corporation. Entrepreneur, designer, developer. My mission and MTP is to accelerate the development of humankind through technology.

8 comments

  1. Hey Alex, I’m finally getting around to re-doing my portfolio and am trying to use this tutorial for my new site. However, I can’t get the navigation to turn out correctly. I’ve done everything per your instructions but it’s all not working correctly and comes out all jumbled up. I have spent lots of time trying to get it to work right and it’s driving me nuts. I was wondering if perhaps I can send you my files, and you could have a quick look at them to see what the problem is? It’s probably something simple that I’ve missed, but I can’t find it.

    Reply

  2. Thanks Alex, that is pretty much what I was thinking, but wasn’t sure. Once I start this project I will play around with it.

    One more question. For the full width background image, is there a minimum pixel width for the image you typically use? With monitors getting bigger and wider, I would want to make sure I use an image/size that won’t looked stretched out or distorted on a larger sized monitor when setting the width to 100% and background-size: cover. Also, do you recommend any good sites to source these images from?

    Reply

    1. You are welcome.

      About the resolution. Mostly I go with hi-res photos, with at least 1200 width. You can always make big image smaller and keep its quality. Stretching and disorting is, unfortunately, unavoidable since monitors have different ratios, so some are wider while others are taller. However, you can use media queries and serv different images with different ratios according to resolution or ratio of the monitor.

      Great sources of free hi-res photos:
      http://www.gratisography.com/
      http://picography.co/
      http://deathtothestockphoto.com/
      http://unsplash.com/
      http://500px.com/
      http://picjumbo.com/

      AD

      Reply

  3. Thanks you so much for showing how to do this! I’ve seen this technique more and more lately but never knew how to do it. I recently graduated with a web and graphic design degree (so I am still learning), but they never showed us how to do this effect in school. I would really like to use this technique to re-do my portfolio, and now I know how!

    One question though, if I want to make my design responsive how would I go about re-adjusting the size of the navigation buttons to shrink them down for a mobile device using media queries for a smaller screen size so they would stack and not be in-line?

    Thanks for doing such a great job with your blog; l have learned so much from you, and I look forward to each one I get in my in box!!

    Reply

    1. Thank you for very much! I’m glad that this tutorial has use for you.

      To answer your question about mobile… I would use media query to target specific resolution like “max-width: 480px” and then either hide nav completely and show icon for nav or simply set new width, height, padding or font size specially for this resolution.

      Reply

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.