Parallax not working on Header Images

mdmcreative

Can you please tell me how to get parallax working on header images. 

• I have created custom layout
• Header = Stack Centre
  
• Position = Parallax
• Image size is 2000x1141px
  
• (Parallax works with other image backgrounds in pages)

(Site is not live yet)

Many thanks

Pablo

Hi,

Please go to the Theme Options > Header & Subheader > Header and scroll down to the background section.

Set the position as Parallax.

http://prntscr.com/mic2i2

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

mdmcreative

It was already set to Parallax there as well - although I thought that adding a custom header would override that??

:-/

mdmcreative

So still not working Im afraid.

Pablo

I have to take a look at it.

Can you send a link to your website when it will be live?

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

mdmcreative

Not for a while yet. Is it possible to PM you a temporary login?

Pablo

Please send us WordPress dashboard access privately thru the contact form which is on the right side at http://themeforest.net/user/muffingroup#contact and we will check what might be the reason.

Notice!
Please attach a link to this forum discussion.

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

mdmcreative

Thanks - done.

Pablo

The login credentials are working, but dialog box is asking me for other credentials (I pasted this same credentials, but they are not working)
Can you disable this or send the login credentials for the second authorization?
Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

mdmcreative

Ahh - sorry - an additional layer of security - I forgot!

It's disabled for you temporarily.

Pablo

Can you tell me on which page it is not working?

I can see, that on homepage it's all working fine.

Cheers

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

mdmcreative

As I mentioned I'm doing a major update on this site at the moment, so there are lots of redundant pages.

The pages that will be used are: Front Page, Visiting (and child pages), Exhibiting (and child pages). All these pages use headers from the three custom layouts I have added.

mdmcreative

I'm using latest version of Chrome and parallax is not working in headers for me.

mdmcreative

I notice it's working now :-)

What did you do??

Pablo

You didn't provide the image for the header.
I set the image of the header in Theme Options > Header & Subheader > Header and now it works.
Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

mdmcreative

That's strange. All my pages use custom headers set in Layouts, hence the global header you put in is not used at all. I can't see why adding that would enable parallax to work on quite different header images set elsewhere??

Pablo

Unfortunately, The header image with parallax can be set globally only.

I suggest you, to use the Revolution Slider on each page.

http://prntscr.com/mkhirm

I reverted my changes to yours.

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

mdmcreative

You made parallax work a short while ago, but then it stopped. I don't want to use a Rev Slider as I'm almost finished!

Can't you do what you did before to make it work again? I didn't even change the global changes you made!

mdmcreative

If as you say it can only be set globally, why is there an option to set it in the layout builder?

Pablo

I can, but you'll be limited to this image on the whole website.

That images you inserted in your custom layouts are the background image of the website(http://prntscr.com/mkim44), not header images and it's displaying only because the "Header" is set to transparent.
This is the fault why the parallax is not working because this effect is attached to #Header, not HTML tag.

The effect with using the Revolution Slider could be the same or better because it's easy to use and customize.
Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

mdmcreative

Leave it then Pablo if you are not sure.

To be honest I don't think you are familiar with this theme function. When you fixed it earlier today, you got parallax working, yet I still DID have different header backgrounds on my different pages as I wanted! Can you explain that?

Pablo

You can recreate it as you want:
1) I set the image of the header in Theme Options > Header & Subheader > Header
http://prntscr.com/mkkftg
2) Disable(tick off) the transparent option in Theme Options > Global > General
http://prntscr.com/mkkg3a

And it will be working, but it will display the single image which is set in step nr 1

It's not a bug - An image in header tag(#Header_wrapper) can be parallax but not the image in HTML tag.

But again, when you insert the image in Custom Layout field (http://www.matmackenzie.co.uk/wp-content/uploads/2019/02/Capture.jpg), then it will be displayed in HTML tag (http://prntscr.com/mkim44), and this is normal behavior, because as you can see, while editing the layout section "Header" is on the bottom and you can't upload the image there.
http://prntscr.com/mkkndb

This background field in the layout is a background of the website (I mean, below the Content)
http://prntscr.com/mkkodz

But, if you'll upload the image correctly, in Theme Options > Header & Subheader > Header, then it will be displayed in '#Header_wrapper', not HTML and the parallax effect will appear:
http://prntscr.com/mkkq7v
Notice that #Header_wrapper has the class 'bg-parallax' but HTML does not.

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next