Skip to main content

Are you still looking for something?

More results...

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

Try these: contact formbuttonbuy photos

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 :}

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

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
<!-- 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>
HTML

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

HTML
<!-- 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 -->
HTML

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
/*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;
}
CSS

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.

Related articles

Comments (11)

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.

Support me

I am writing this portal in my free time and I pay for it myself. So, if you want to support my work – use this button to buy me a coffee 🙂 Which will help towards the hosting costs of the portal.

Buy me a coffee