Keeping content centered in background image?

Shapely
1

I am using Shapely on a site (rosslifts.ca). I have tried several other one-page themes and plugins, but was not able to get any responses to support questions. So far, Shapely seems to be the best theme for what we are hoping to achieve.

Really, all we want is the menu items to scroll to the section of the pages without the background moving behind the content, because the backgrounds frame the content. I’ve read two post: Disable scroll in widget, and A few questions – inlc. parallax. We don’t want to disable the scroll, but would like the content to remain centered in relation to the background. Do you have any suggestions on how to achieve that?

Thank you.

2

Hi @colourme,

I hope you are well today and thank you for your question.

You can try achieving this for first parallax section by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Shapely Options -> Other

div#shapely_home_parallax-1 {
    background: url("http://rosslifts.ca/wp-content/uploads/2016/08/fancybw.png");
    background-position: center;
}
div#shapely_home_parallax-1 .align-transform {
    top: 75%;
}

You have to develop the similar code for other parallax sections on your site.

Best Regards,
Movin

3

That’s great, Movin! Now I have to tweak the settings for mobile. Appreciate your help.

Cheers!

4

You are most welcome here :slight_smile: