[Resolved] Customization: Bind Header With Parallax Effect as Background Image

[Philip]

Hello
I m trying to achieve using Elements and Backgrounds addons to make in such a way that the header will disappear slowly as you scroll down and it will follow as a background image with parallax effect, at the moment it does not work the combo and it loads the same image twice i would like to load it once for speed up site, and then if possible to make Primary navigation bottom of header and Secondary Menu on top of Element header.
Not sure if this is possible maybe i m missing something, because my English is poor i will make it short, i want to make somehow at the moment how is header centered then it moves as background and disappear when you scroll.
Please visit my site to see what i have done to give an idea.
Also to note if i set in Ellement the Parallax setting then i can’t select Center Center only center top for background image. The Header Image is not present at the moment!
Not sure but i think i have seen such effect on a site but don’t remember which one it was.
Thank you very much for this great theme!
p.s. maybe it will be a new idea if it does not exist yet for themes.

[Philip]

Oh after i wrote this i have went into Elements and have removed the background image, now i think that i need to center somehow the other background image, then after this resolve the Menus to make both transparent and separate from each other.

[Leo]

Hi there,

Sorry I’m having a hard time understanding what you are trying to achieve.

Let’s take one step at the time.

I believe this is the current issue:

now i think that i need to center somehow the other background image

Which image are you referring to here? The body background looks center to me:
https://www.screencast.com/t/vjNvrRkCP7E2

[Philip]

Hello
I wanted to make Header to follow like background image but both Menues separated from each other, the only thing i think to do is add a transparent image in place of header image to trick this system in some way, and the background image will be the header in same time.
In short it is fixed now but i find many nuances related to iPad and iPhone usage, it seems that the theme is lacking customization for those, you can give a test from iPad and iPhone to see what i mean.
Not sure if what i see on mobile is related to cache or not, will test without cache plugin tomorrow and let you know if is related.
Thank you for taking the time to reply!
P.s. the theme is perfect customizable for Desktop but the iPad or Smartphones there is needed some more development, not sure if Tom have time for that but i m satisfied with this Theme.

[Tom]

Hi there,

Any chance you can link us to an example of the kind of functionality you’re trying to achieve? I’m having trouble picturing it.

[Philip]

Hello Tom.
It is hard to explain by words what i have in my imagination, i wanted to make the header to follow as background picture and it currently does when you scroll down, if scroll up it will reappear as header image and background at same time with both Menus separated from each other, at the moment i m satisfied with what i have done but on mobile it does not show at all the Element is damaged or is not compatible with mobiles, i have disabled WP Optimize plugin but on mobile is not showing as on Desktop, also the menus on mobile are not user friendly after i did this change.
What i wanted to say is that there are not much settings to make it work on mobile devices or even iPad devices, the layout for them need improvement.
Also i m not sure if i have seen this on any site or is just something of my own make?!
P.s. by making this i got rid of a error which was showing on Google Page Speed Insights, it was named Cumulative Layout Shift and it helped to improve ranking.

[Tom]

Fixed background images won’t work on mobile devices (too CPU intensive).

You could:

1. Increase the site header offset value for mobile in your Header Element.
2. Use some CSS to adjust the positioning of your image on mobile:

@media (max-width: 768px) {
    body {
        background-size: auto 100%;
        background-position: center -200px;
    }
}

[Philip]

Yes this did the trick, now is better, thank you!
You are best!
P.s. wanted to let you know maybe someone is interested, i m selling tors,io premium domain name.

[Tom]

Glad I could help! 🙂

[Author]

Posts