Advice on moving parallax image up

Support
#1

Hi there,

On this page: http://wordpress-100914-329432.cloudwaysapps.com/messages-2/ you’ll notice that there is a parallax background image in Section 1. I’d like to push the image up further so that all of the people in the image can be seen first. However, I tried using some CSS to address this and it isn’t the best solution because some whitespace is visible on certain screen widths.

Here is a cloned page: http://wordpress-100914-329432.cloudwaysapps.com/messages. On this page, I added the following CSS:

@media only screen and (min-width: 320px) and (max-width: 480px) {
.page-id-52 .x-section.bg-image.parallax {
background-position: 0 -100px !important;
}
}
@media only screen and (min-width: 481px) and (max-width: 980px) {
.page-id-52 .x-section.bg-image.parallax {
background-position: center -534px !important;
}
}
@media only screen and (min-width: 981px) and (max-width: 1100px) {
.page-id-52 .x-section.bg-image.parallax {
background-position: center -534px !important;
}
}
@media only screen and (min-width: 1101px){
.page-id-52 .x-section.bg-image.parallax {
background-position: 0 -300px !important;
}
}

You’ll notice that if you decrease the width of the browser, there is some whitespace visible. So I’m not sure I did it correctly here.

Any advice?

#2

Hi There,

Thank you for writing in, we don’t suggest to use a custom CSS with the parallax effect. Try to edit your image to a landscape oriented version (rectangular type).

You can also turn off the parallax, and add this on the sections inline STYLE

background-attachment: fixed;background-position-y: bottom;

This will give the background-image a parallax like effect, but focus the image on the bottom part.

Hope it helps,
Cheers!