1. Home
  2. Customization
  3. Add full-width image to your SmugMug site with text and/or button over it

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

Full Image with text and call to action button

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.


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>

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

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

Updated on November 20, 2018

Was this article helpful?

Related Articles


  1. Wow, so cool. Thank you very much! Your tips and tutorials are very helpful for me. Im building my website. Maybe you want to take a look. Im from Costa Rica, so the webpage language is spanish. http://www.carlosalonso.photo I would like to ask you something, how I can do the box you have made in your webpage below the title “Our Wedding Prices”? Do you have a tutorial for that? I do not want to be abusive, just want to know if can be posible to learn about it. Any way thank you so much!

    1. Hey Carlos. Thanks for visiting the portal and thanks for those kind words. I have not written a tutorial on those three price boxes – but I am plan to write one in the near future.

  2. Hi Tomasz! Is there a set of image dimensions that works better than others? For example, on my smugmug site (larryrogersphotography.us) I used your code for two images on my home page. The images are not the same dimensions, although both are 1:2 aspect ratio. When I stretch my browser wide, the images stretch at different rates. I would like to standardize them, (also place them in a folder without watermarks) if you think that is a good idea. One last question – is there a way to get them closer together vertically, say 4 px between the upper and lower one? Thank you so much! Check for a cup of coffee (or two)!
    Regards, Larry

    1. Hey Larry, I have checked your homepage and both images are resizing the same. Could you please clarify? I think putting those images UNWATERMARKED to an UNLISTED gallery would work best. Removing margins – you can just click CUSTOMIZE → CONTENT AND DESIGN → hover your cursor over the content block and hit the triangle icon – this will allow you to change margins of your HTML content blocks. Oh and thanks for the Coffee :}

  3. Hi Tomasz! Thank you for the incredibly helpful information. I am having trouble getting my image into the code. I have copied and pasted the link to my photo many times and it just won’t work. The result is always the pink box with the text and button. I was able to change my text just fine. The link I am attempting to use is http://www.ordinarybits.com/Gibbons/i-2HJhP7v/A. Is there something wrong with my link? Does the http:// vs. https:// make a difference? I copied the link directly from the photo, using the share button. Thank you in advance! 🙂

        1. Hi Tomasz, I’m having the same issue as gilgabesmom, replace the link with an image URL from one of my smugmug galleries and just get the pink background… any solution?

          1. Could you please send me a link to the page, where you have added the code? I will check it for you.

      1. Ignore my comment below, I was having the same problem but I found the solution to this from Tomasz in a comment under another post:

        “You are grabbing the wrong link to your image. Instead of grabbing the link to an image – you are grabbing a link that will display your image in your gallery { which will not work }.

        So first thing you need to do is to make sure that the gallery, where your image is located is either PUBLIC or UNLISTED { not password protected or private }. In the gallery settings make sure that you TURN OFF the HIDE OWNER feature – you do not need that.

        Then double click on the image that you would like to use for the slideshow → click the SHARE icon that appears below the image → choose the image size that you would like to use { for example X3Large } then copy the image link and use it in the slideshow code.”

  4. Checking your Smugmug test page related to this article, I noticed that the link “here” brings me to a specific scroll position on the page.

    I would like to do something similar on my site, specifically let the visitor go to specific position at the moment of opening my homepage.

    Is there a specific code you could help me with to make this possible? Thanks a lot

  5. Thanks for That! Only question is how can I make that responsive as it only works for desktop but doesn’t scale down properly for laptops tablets phone’s.

    1. Shana, this is responsive and should work fine on smaller devices. Could you post a link to your page, where this is not happening? I will check it for you.

  6. This code worked beautifully for the text and button, but how do you get your image to go full-width? Mine comes up the same width as usual?

  7. Thomasz – wanted to catch you before you went to any trouble. I always feel like a fool once I figure this stuff out. I had the page layout settings set to and once changed to all was well. Thanks again for your tutorial.

Leave a Comment

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