[monqWebTeamParticipant]

If you visit http://monq.io/, near the very bottom of the page, there is a section with a very large button that reads “Check out all 7 blends.” The problem is that the top of the background image of the container never really comes into view, so the user never sees the full name of the products in the image.

How can I make it so that the background image moves down as I scroll down?

[ZeshanMember]

Hi there,

Thanks for writing in!

This is possible with parallax, and upon checking, it seems you have enabled the parallax background and the image is visible for me on scrolling (see: http://prntscr.com/6nrwhl). Please confirm if you were able to achieve your desired results.

Thanks!

[monqWebTeamParticipant]

Hi there,

Perhaps you misunderstood the question.

I have parallax enabled, yes.

However, for some reason, I never end up seeing the TOP of the actual image, based on the way the page scrolls.

The way you have it in your screenshot, you must have taken the screenshot with your browser open quite wide. I can get the tops of the products to show like that, as well, but not at all screen widths.

What can I do to always have the top of the image show in this parallax?

[FriechModerator]

Hi There,

Unfortunately, parallax background behave that way. What we could do here is to fixed the background position you can add this under Custom > CSS in the Customizer.

#x-content-band-3 {
  background-position: 50% 0 !important;
}

Also try to increase the height of the content band so when the big button gets centered on the page the whole background would be visible.

Hope it helps, Cheers!

[Author]

Posts