Having trouble moving H1 to align top (over Hero image) AND/OR big slideshow!

naomimaya

Hi there,

Can anyone help with these 2 questions please?

First, I'd like to know if there's a way to make a big slideshow (full screen, or close to) similar to a Hero image at the top of my page? I know I can do a "background slideshow" which does achieve the effect I want, however, if I understand correctly, then I can't put anything else on the page? I would like to have the user be able to scroll down and see content below the slideshow.

If the above is not possible... I would like a Hero image with H1 title text over it. I have done this to the best of my ability already, but am having trouble making the H1 title align near the top of my image. It's stuck in the center both vertically and horizontally and it looks silly this way.

The page I am referring to is https://www.naomimaya.com/Services/Victoria-Wedding-Photographer

Thank you in advance!
Naomi

Hikin' Mike

If you want to put your <h1> on the top/center of the image, find this:

.hero {
    background: #fff;
    background-image: url(https://photos.smugmug.com/photos/i-mfc6Mkj/0/6d97db56/O/i-mfc6Mkj.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 85vh;
    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;
}

Remove this:

    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;

Hikin' Mike

You can create a full-screen slideshow. You just need to remove the 12px margins. I have an example here: https://gallery.imagesinthebackcountry.com/Smugmug-customization/Full-screen-slideshow/n-LwPmNs

naomimaya

Thanks, Mike! I will try that!

tatteberry

The hero headline works fine now. Can you tell us how to align center the text please?

Thanks!