[Resolved] Change parallax image size for contained type option?

[Thyra]

When I use the page header add-on with a background image and settings activated for parallax and contained type, the image is automatically zoomed to my full screen width and only a small crop is displayed in the contained portion. I have tried to enable hard crop option, but it has no effect, when parallax is activated. Can I somehow change scaling of the background image from full screen width to the width of my container?

[Tom]

The crop settings won’t do anything to background images.

The background image will scale to the full width if that’s your container type – the aspect ratio will remain the same which can cause distortion if the image isn’t the right size to fit in the container type you have selected.

I suggest trying out a couple different image sizes to see if you can find the optimal size.

[Thyra]

Hi Tom,

I use a container width of 1.100px all over my site (suppenblog.de) and all elements in Customizer > Layout are set to “contained”. For the page header I use an image which is 1.100px wide and 825px high. When I add that image to a post via the page header add-on and activate the following options in content settings it will be displayed as a zoomed crop of that image (https://suppenblog.de/apfelsuppe-mit-raucherlachs/):
– Add padding – yes
– Add background image – yes
– Parallax effect – yes
– Container type “contained”
– Top/Bottom padding “350px” (“400px” tested as well)

When I switch the Container type to “fluid” the image will be responsively scaled up to full screen width (I use a 5k display), even if I do not activate the setting “Full screen”. It has no effect, if I toggle “Full screen” on or off with Container type “fluid”.

It seems as if the background image is scaled up to display width with page header add-on. Using the Container type “contained” just overlays the left/right parts of the background image and leaves a window through which you look at a small portion of the background image.

I thought that if I use an image with the same width as my content container (1.100px), it will be displayed with the correct width. I have tested a larger image as well, which shows the same effect. If I use an image smaller than 1.100px, it will be to small for my layout. So, I am not quite sure, what other image sizes I should try.

A friend of mine has tested the settings on his blog as well and he experience the same behavior: The image is scaled up to full screen width (even if the image is smaller), when activating “Parallax effect” with Container type “contained”.

Thanks,
Thyra

[Tom]

The issue here is the parallax effect.

How it works is it sets the image to display the full size of your screen and sticks it there, then it only shows in the view-able window you set it to.

This is unfortunately just how the background-attachment: fixed attribute works in CSS, which is how you create the parallax effect.

Unfortunately I don’t think there’s any other way to accomplish the same effect.

[Thyra]

I was afraid, that is the answer to this problem. Thank you!

[Author]

Posts