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

[Elizabeth]

Hi there,

I’ve been using Generate Press for awhile now and I’m THRILLED about the new Elements section! SOOO great, thank you! For the home page of a site I’m working on, I’d like to use more than one custom background image under the text and button in the page hero element. Is there a way to code that in? If not, once I install a slider plugin (usually use meta slider) how do I set it the slider short code to be the background and sit below the text and button elements of the page hero? I’d like to avoid having any text or anything else in the plugin if possible.

Please advise, thanks!

[David]

Hi there,

you can try absolutely positioning the slider behind the content.
To do this give the Hero a Element Class eg. slider-hero

Then add your content you want display in front followed by the slider shortcode wrapped like so:

<div class="background-slider">
    slider shortcode
</div>

Then add this CSS:

.slider-hero {
    position: relative;
}
.background-slider {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
}

Just need to make the slider is full width and responsive.

[Elizabeth]

Hi,
Thanks for the prompt response. When I follow your instructions, it doesn’t put the slider behind the text but below it. It also affect the entire home page, making the entire page background the image or color indicated in the hero background info? Any other ideas?

I wish I could simply select multiple images from my media in the “Custom Image” section, for which a slider would then be generated (eliminating the need for any plugin). Or at least a way to paste the slider shortcode under “custom image”… any chance that could be an update soon?

TIA!

[David]

Can you make sure you have added slider-hero to the Element Classes field.
You will also need to ensure that their is no background image and any background color is transparent.
If you do the above and it still doesn’t work can you leave the code in place and provide a link to the site.

[Elizabeth]

Hi, here’s the link: http://enunziato.com/SBP1B/

Right now I’ve left the code in, but the text is still above the slider and the slider – and all home page sections below it – are now oddly cropped on the sides (not full width/parallax as they should be). There’s also a an advanced section in MetaSlider for CSS but when I put the slider-hero class designation there it doesn’t make a difference.

Help please 🙂

[David]

I edited the CSS above https://generatepress.com/forums/topic/insert-background-images-slider-effect-in-page-hero-element-without-plugin/#post-685231

Try that instead

[Elizabeth]

Hi David,

Thanks for your quick reply: That correction indeed makes the element fall behind the text – I can’t believe I didn’t notice the name discrepancy and fix it myself lol. However, now it’s forcing all the element’s properties on the entire home page – the text, link colors, cropping, etc. It’s also forcing the element behind EVERYTHING on the home page, which makes the text that I don’t want overlaying the slider hero section up…

[David]

Lol – i went all back to front with that one 🙂
EDIT:
Fixed the HTML now 🙂 honestly i blame running out of coffee

[Elizabeth]

😂 Same here!! I could’ve fixed that if I’d bothered to use my own brain first, sorry!

I’m still only having one issue though: the slider’s still “pulling” past the element boundary and onto the other sections, for some reason. Can you take another look? I’ve made the element background color green for now so you can see how the slider acts outside where it should be locked. No setting changes in Masterslider seem to have an effect…

[David]

My coffee machine broke and i only got it repaired 2 days ago – its definitely to blame lol

Ok so try changing your Header Element top and bottom padding to 19% and 18% respectively.
Might need to adjust the Site Header Offset…. but we’ll see.

[Elizabeth]

Hmmm… that adjustment helps it look better in a standard view, but in mobile it’s all wonky and it’s still allowing the element’s text to slide away from the image (slider) below and overlap the home page section below.

[David]

So for mobile, may i suggest not having the Merge with Site Header?
Then reduce the Mobile Padding on the Hero.

[Elizabeth]

Hi again David,

it’s been awhile but I’m returning to this project (Monday deadline! lol). This slider solution is still not working, it slides behind the background of the page elements below rather than stopping/cropping within the header when the page size is adjusted. Can you take another look please? thanks

[David]

Ok, so lets try a different approach.
Can you:
1. Comment out the CSS that i provided for the Slider positioning.
2. In the Hero editor adjust your code so it is like this ie. slider comes first and the titles are wrapped:

<div class="background-slider">
    slider shortcode
</div>
<div class="hero-title">
    <h1>My H1</h1>
    <h3>My H3</h3>
</div>

3. Remove the left and right padding for the hero.

Once thats done, let me know and i can give you some other CSS

[Elizabeth]

Ok, I did that but now it’s situated below the slider and the slider is below the nav and top bar (not merged with it/behind it as desired).

[Author]

Posts