[Resolved] Insert background images (slider effect) in Page Hero Element without plugin?

[David]

Thats fine, can you also remove the top padding and on the site header page remove the Offset.
Then ill send over some CSS

The div around your title content is also broken….

[Elizabeth]

What do you mean by “offset” there is a section for header padding within Customizing – Layout – Header and I have 40-60 on all sides there, do you want me to remove that? I don’t see an offset option otherwise.

[David]

In the Header Element > Site header tab > Offset Site Header Height – is there any value in there?

Your markup is broken and needs to look like this:

<div class="hero-title"> 
    <h1>Saint Benedict Parish</h1>
    <h3>Welcome to our Roman Catholic faith community</h3>
</div>

[Elizabeth]

Aha, I found it, thanks! Fixed the markup too. Still sitting underneath the slider though. Css?

[David]

Now this CSS:

.inside-page-hero {
    position: relative;
}
.hero-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%,-50%,0);
}

[Elizabeth]

TA DA! Thank you very much! We drank our coffee today!!

[David]

Awesome.
Check the mobile version. You need to remove the hero padding for mobile. I would personally set the merged site header to desktop only.

[Elizabeth]

Thank you! I’m sorry to bother you again, but I’m adding a slider to a second version of this site and trying to place it behind the content box and buttons pulled from the hero sample 3 at https://docs.generatepress.com/article/page-hero-examples/. I know there’s overlap but I’m not sure what to remove/add to fix. Please advise if you can!

[Elizabeth]

Sorry, this one’s at http://enunziato.com/SBP1A to take a look.

[David]

No problems. Do you want the content to be placed to the side?

[Elizabeth]

Yes, just like in the sample but on top of the slider instead of a single static image. Thanks!

[David]

OK, so remove this CSS, as we won’t be able to use the CSS grid method as the slider is falling into that.

.inside-page-hero {
    display: -ms-grid;
    display: grid;
    grid-template-areas: "left right";
    -ms-grid-columns: 50% 50%;
    grid-template-columns: 50% 50%;
}

.page-hero-content {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
    grid-area: right;
}

@media (max-width: 768px) {
    .inside-page-hero {
        display: block;
    }
}

And then replace this CSS:

.hero-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%,-50%,0);
}

with:

@media (min-width: 768px) {
    .hero-title {
        position: absolute;
        top: 50%;
        right: 10%;
        transform: translate3d(0%,-50%,0);
    }
}

the right property positions it 10% away from the right border. reducing it will move it further right.

[Elizabeth]

Hmm it’s still stacking it below the slider, am I doing something wrong?

[David]

Nope it was all me lol that last piece of code above beginning with @media i just edited ( i got my min and max mixed up….)

[Elizabeth]

Almost there! It looks great full-size now, but is doing a weird stacking thing when scaled to tablet or mobile…

[Author]

Posts