Found what you have been looking for?

Search
Generic filters
Exact matches only
Filter by Categories
Customization
Domains
Lightroom Plugin
Tools and Tips

Add full-width image to your SmugMug site with text and/or button over it

I have heard so many requests about how to add either a full-width image with a text over it or a full-width image with a call-to-action button to your SmugMug site.  If you are the one who has been asking for this before – today is your day :}

Today I will show you how to add a full width image to your site with a text over it and a call-to-action button { optional }.  You can see how it looks on my SmugMug test page – here.

HTML Code

First thing, you will need to add a HTML content block to your site, where you would like for this image to appear.  In the HTML tab of the HTML content block you will need to add this code to it:

<!-- HTML code for an image background with a text and button over -->
<div class="hero">
  <h1>BEAUTY <br>IS A DREAM<br><a href="http://www.photom.me">VISIT MY SITE</a></h1>
</div>
<!-- The <br> is to put the second part of the text to the second line --><br>

And optionally, if you do not wish to show the button – but only the text:

<!-- HTML code for an image background with a text  -->
<div class="hero">
  <h1>BEAUTY <br>IS A DREAM<br></h1>
</div>
<!-- The <br> is to put the second part of the text to the second line -->

TIP:  Choose only one of the above options – otherwise this will not work.

As you can see – I have displayed this text over my image  BEAUTY IS A DREAM and I have used the <br> tag to put the second part of the text on the second line.

If you have chosen the first option – with a button then read below – if not, skip this section.

The code for the link looks like this <a href="http://www.photom.me">VISIT MY SITE</a> as you can see there is a link, where my visitors will be taken after they click the link and the label VISIT MY SITE that will be displayed in the button.

CSS Code

Now you need to open the CSS tab in the HTML content block and then add this code to it:

/*CSS to modify the appearance of the TITLE text*/
h1 {
    color: #fff;
    margin: 0;
    width: 100vh;
    text-align: center;
    font-size: 70px;
    font-weight: 700;
    letter-spacing: 3px;
}
/*CSS to modify the appearance of the button*/
a {
    border: 0 solid;
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0);
    outline: 1px solid;
    outline-color: rgba(255, 255, 255, 0.5);
    outline-offset: 0px;
    text-shadow: none;
    -webkit-transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
    transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
    color: #fff;
    font-size: 20px;
    padding: 10px;
}
/*CSS to modify the appearance of the button after a cursor have been hovered over it*/
a:hover {
    border: 1px solid;
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 255, 255, 0.2);
    outline-color: rgba(255, 255, 255, 0);
    outline-offset: 15px;
    text-shadow: 1px 1px 2px #427388;
}
/*CSS to modify the appearance of the background of the image*/
.hero {
    background: pink;
    background-image: url("https://photos.smugmug.com/photos/i-SH8GhSN/0/X3/i-SH8GhSN-X3.jpg");
    /*Replace link to the background image with your own image*/
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 60vh;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -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;
}

In the CSS code the only thing that you need to do is to replace the link to background image with your own image link.

button, full width, hero, image


Tomasz Nowicki

My name is Tomasz Nowicki and I am a PHOTOGRAPHER and WEB DESIGNER based in the UK. Few years ago I have created my first website using SmugMug - a powerful platform for any type of photographer. I fell in love with it and from day one I have started exploring the possibilities of customizing my website. PHOTOM Portal is a my personal SmugMug knowledge base website where you can find some tips and tricks on how to use and get the most out of your SmugMug website.

Comments (5)

  • I used this code and for an image that I wanted to be an impactful landing page to my website and then you can click the button to enter. I made a few tweaks to where the button was located and the element container size. My question pertains to mobile view. It is all messed up and the button lands in a totally different spot. Is there something I can do to pin it to it’s location on my image?

  • Alexander Stephan Photography

    For both this and the Hero Full Screen Header with mouse scrolling blog you created, is there a way to move the text either lower on the photo or to the left/right? See the example here: http://www.vividvisuals.asia. I’d like the text to be either in the negative space to the left of the person in the portrait or below the face just above the mouse scroll. Will buy coffee for your help!

  • Alexander Stephan Photography

    Also, further to my comment above, is there a way to get the full screen header to extend behind the menu / logo like it is on yours?

Leave a Reply

Your email address will not be published. Required fields are marked *

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