1. Home
  2. Customization
  3. How to add a full screen header to your SmugMug site

How to add a full screen header to your SmugMug site


In this short tutorial I will show you how to add a full screen header to your SmugMug site with an animated icon/arrow that will encourage your visitors to scroll down.

This tutorial is part of a series, which will allow you to create this custom layout on your SmugMug site:

Full Screen Header on SmugMug

You can test drive a similar layout here!

This design may look very complicated because we will be using only HTML and CSS to achieve this look – but don’t be worried, this is actually a very easy to follow tutorial – most of the stuff that you will be doing is copy and paste code :}


If you plan to add this header to your homepage, make sure that you are working on your homepage.  You can access your homepage design by logging into your SmugMug account → click CUSTOMIZE → CONTENT AND DESIGN and on the right side select HOMEPAGE:

customizing homepage on SmugMug

Once you have selected homepage you will need to add a HTML content block to the top of your homepage.

adding HTML content block to SmugMug

In the HTML section of the HTML content block you will need to add this code:

<div class="hero">
  <h1 class="hero__headline">FULL SCREEN</br> SECTION</h1> <!--Replace the FULL SCREEN text with your own header text --->
<a href="#content">
<div id="mouse-scroll">
 <div class="mouse">
    <div class="mouse-in"></div>
      <span class="down-arrow-1"></span>
      <span class="down-arrow-2"></span>
      <span class="down-arrow-3"></span>

Just make sure that you don’t forget to replace the FULL SCREEN SECTION text with your own text.  As you can see there is a </br> tag between FULL SCREEN and SECTION – this is to break line tag, which will allow the word SECTION to appear below FULL SCREEN.

Open the CSS section in the HTML content block and then add this code to it:

/* ======== Scroll Bar ========= */
#mouse-scroll {
  style: block;


#mouse-scroll {
  position: relative;
  margin-right: auto;
  margin-left: auto;
  bottom: 250px;
  z-index: 1;
  text-align: center !important;
  display: block !important;
  width: 10px;

#mouse-scroll span {
  display: block;
  width: 5px;
  height: 5px;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  transform: rotate(45deg);
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  margin: 0 0 3px 5px;

#mouse-scroll .mouse {
  height: 21px;
  width: 14px;
  border-radius: 10px;
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
  border: 2px solid #ffffff;
  top: 170px;

#mouse-scroll .down-arrow-1 {
  margin-top: 6px;

#mouse-scroll .down-arrow-1,
#mouse-scroll .down-arrow-2,
#mouse-scroll .down-arrow-3 {
  -webkit-animation: mouse-scroll 1s infinite;
  -moz-animation: mouse-scroll 1s infinite:

#mouse-croll .down-arrow-1 {
  -webkit-animation-delay: .1s;
  -moz-animation-delay: .1s;
  -webkit-animation-direction: alternate;

#mouse-scroll .down-arrow-2 {
  -webkit-animation-delay: .2s;
  -moz-animation-delay: .2s;
  -webkit-animation-direction: alternate;

#mouse-scroll .down-arrow-3 {
  -webkit-animation-delay: .3s;
  -moz-animation-dekay: .3s;
  -webkit-animation-direction: alternate;

#mouse-scroll .mouse-in {
  height: 5px;
  width: 2px;
  display: block;
  margin: 5px auto;
  background: #ffffff;
  position: relative;

#mouse-scroll .mouse-in {
  -webkit-animation: animated-mouse 1.2s ease infinite;
  moz-animation: mouse-animated 1.2s ease infinite;

@-webkit-keyframes animated-mouse {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  100% {
    opacity: 0;
    -webkit-transform: translateY(6px);
    -ms-transform: translateY(6px);
    transform: translateY(6px);

@-webkit-keyframes mouse-scroll {
  0% {
    opacity: 1;
  50% {
    opacity: .5;
  100% {
    opacity: 1;

@keyframes mouse-scroll {
  0% {
    opacity: 0;
  50% {
    opacity: 0.5;
  100% {
    opacity: 1;

/* ===== IMPORTANT CSS ===== */
.hero {
  background: #000;
  background-image: url("https://photos.smugmug.com/photos/i-22BSNg8/0/X3/i-22BSNg8-X3.jpg"); /*Fullscreen header image - Replace this image link with your own image link*/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center; 
  color: #fff;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 100vh;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;

.hero__headline {
  font-size: 6.5vw;
  color: white;
  text-align: center;

/* ===== THAT IS IT! ===== */

I know the CSS is long – but the only thing that you need to change is the link to the image that you would like to use as your header image.  Once you have done this there is only one last thing left – THE ANCHOR POINT – this is the section of your homepage where your visitor will scroll to, when they hit the scroll icon in the header.

I recommend placing it right below the full screen header.

Adding an Anchor Point

Adding an anchor point to your page is very easy – just add another HTML content block right below the header that you have just added to your page and then add this code to it:

<!--   Your anchor point -->
<h1 id="content"></h1>

That is it :}

In the next tutorial I will be showing you how to add those two images with overlapping intro text – great for gallery descriptions, blog posts, etc.  Stay tuned!

Updated on January 13, 2017

Was this article helpful?

Related Articles


  1. Hi Tomasz,
    thank you for the tutorial!
    Do you know how to put a logo and a menu on top of the full screen header?

      1. Thanks for the prompt reply man!
        I wonder if it takes many codes for that function?
        Sorry I dont have a clue about coding lol

    1. I need to write it more clearly.
      If I choose the layout of the page stretchy, the header would be in full screen but also all content blocks below.
      If I choose a fixed layout (for example 1080), the content blocks would have the right size that I want but the header would be also in that size and not full screen.

      What I want is to have a full screen header and not full screen content blocks.

      1. Tu,

        You will need to set your homepage to STRETCHY and for content blocks below the homepage use the SPACER content block on each side of your content block to add more space – so they look narrower compared to the header.

  2. Great tutorial. I’m looking forward to seeing how you overlap text over an image. Is that tutorial up yet?

  3. Just started to build my own Smugmug site. Great tutorial indeed on this site. Thanks for that!

    Any possibility for combination of the 2 customizations:
    – Custom edge-2-edge animated slideshow for your SmugMug site
    – How to add a full screen header to your SmugMug site

    Similar question above

  4. Where is the next tutorial which you have mentioned in the last ?

  5. Hello Tomasz!

    My website is http://www.madiphotography.com and I can’t seem to figure out how to do the collapsible menu screen on the left. Would you happen to have a tutorial on that? I am trying to do the FULL screen as in this Tutorial, but it is only taking on the section of the photos!

    1. The menu is something new that I have been working recently on. I do not have a tutorial for it yet – but I may add it in the future.

  6. Excellent info! Thanks for putting this together. Is there a way to adjust the CSS to fit the image and background dimensions? I’m finding a gap at the bottom between where the photo ends and where the HTML content block ends which is causing a further gap between the next elements on my page. Thanks!

Leave a Comment

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