Background image in a row

At http://nnu.dk/ I have placed in image a a background in a row.
It seems that when the page loads the image is at the top, but as soon as I start to scroll it jumps down and looks as if there is blank space at the top of the image.

How can I make it so that the scrolling begins withe the image placed in the top of the row?
Should the image stick to certain dimensions or?

Thanks!

-Peter

Hi Peter,

I am sorry to hear that you’ve been into an issue. I am happy to help out.

The issue doesn’t seem to appear when I check your website.

Have you been able to manage it by yourself?

If not, it would be better if you can share a screen recording video to point me the issue appearing on your end.

Regards,
Kharis
aThemes Support

Hi… Sorry to be VERY slow…

Minutes ago I edited the site and I remembered that I had addressed the problem here. I still have not figured it out, but I made a short video - hopefully this explains the problem: https://www.youtube.com/watch?v=pkPc1kkrz0g

Thanks!

-Peter

Hi,

No worries Peter!

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

.panel-row-style[data-siteorigin-parallax] {
  background-position: center center !important;
}

Let me know how it goes.

Regards,
Kharis
aThemes Support

Thanks - I have tried now!
It seems that the picture now fits from the beginning.
It’s not as “sleek” or “sexy” since it does not scroll though along with the page-scroll. If this could be fixed as well it would be grand!

Hello Peter,

I am Rodrigo and will continue this thread with you!

First thanks for using our theme!

To maintain the parallax effect (moving the image while scroll), probably the only way is resizing your image to an aspect ratio more wide. As you can see in the link below, your background has an aspect ratio too “squared”:

https://i2.wp.com/nnu.dk/wp-content/uploads/2018/04/DSCF1030.jpg?fit=5599%2C3733

Please try resing the image to something like below:

An image with the same size/aspect ratio like the red lines above. This way you will have a image more wide and probably this issue should be resolved.

We hope this helps!

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

aThemes Support

1 Like