Parallax effect in header of a blog page

Hi,

first of all, I would like to thank you for all help I’ve recived from you for my website.

Could you please help me once again. This time I would like to have a parralax effect in a header of my blog page (as like on my front page http://excelraport.pl/).

  1. I can’t fix it by the layout builder on blog page. Is it possible this way ?

  2. If it is not possible how can I achieve this feature ?

  3. If this issue exceeds area of your help, could you please provide me with some css cod for my header background to looks like this ONLY for my blog page.

For blog page I would like to have header background white with black letters without any change.

Roman helped me personalise header in post : https://athemes.com/forums/topic/header-text-and-background-colour-change/

Thanks for any help !

Regards,

Paul

Hello Paul,

Please try to use the following CSS code.

You can add CSS code to your site with Simple Custom CSS plugin (just copy CSS code and paste it in Dashboard → Appearance → Custom CSS after installing and activating the plugin). Also you can add CSS code directly to style.css file of your child theme.

body.blog div.header-image {
    background-attachment: fixed;
}

Kind Regards, Roman.

Hello Roman,

thanks again for answer. It works almost perfect. There is one more issue. I would like to have different parallax background picture for each site. How can I achieve it ? Can I display background picture only for blog site ?

Regards,

Paul

Roman,

in one of your posts I found a solution for my problem - a Unique Headers plugin. But I can’t set up parralax header for rest of my pages. Could you help me ?

I realised that adding page after body in your code fix it. But I have another two problems:

  1. I would like to have a text in a header which will also behave like on parallax background

  2. how to remove a kind of shadow (not clear picture) in a hader ?

Regards,

Paul

Hello Paul,

  1. As an option, you can add text directly to image.

  2. Please try this CSS code:

div.header-image > div.overlay {
    opacity: 0;
}

Kind Regards, Roman.

Roman,

thanks again for your help. Regarding point one: if I insert a text on image it will be static, I mean it will not move with the bottom part of the site. On my front page in section “Czy chcesz teraz” is an effect I would like to achieve. Could you help ?

Hello Paul,

Looks like this task requires some coding and testing on different screen resolutions, this goes beyond our support policy. It’s considered advanced customization.

As an option, you can contact Codeable for this kind of service, or find a freelancer on Upwork.

Kind Regards, Roman.

Hi Roman,

thanks for you help !

You are welcome Paul,

Please feel free to ask any other questions that you might have in future.

Kind Regards, Roman.