Docs

[cmdev]

How do you control the background image to ensure it doesn’t go under the main menu on full screen.

Can you anchor the background image so that it responds to not crop out a photo?

See link:
http://www.triflight.com/lp/digital-campaign-dec-jan/

[Rad]

Hi there,

Thanks for posting in.

Hmm, the problem with that is the background is in fixed position. It doesn’t sync with any other element like navbar.

Plus, the positioning is dynamically calculated by javascript based on screen size (full screen). Forcing it with CSS makes it work on specific view, but not for all.

How about changing it to CSS background? Example, let’s say you removed that background. Then add this CSS to Admin > Appearance > Customizer > Custom > CSS

body.page-id-686 {
    background: url(http://www.triflight.com/wp-content/uploads/2016/12/Holiday-Landing-Page-1_FullPage-3.jpg);
    background-attachment: fixed;
    background-size: cover;
}

Then edit this image http://www.triflight.com/wp-content/uploads/2016/12/Holiday-Landing-Page-1_FullPage-3.jpg and reduce the top space to 85px.

Hope this helps.

[cmdev]

I do like this solution, however it creates a flicker instead of loading the background image.

http://www.triflight.com/lp/digital-campaign-dec-jan

The background image loads for a moment then it shows the default site background image

[Christian]

Please add the code below in your Appearance > Customize > Custom > Global CSS

.backstretch {
    display: none;
}

Thanks.

[Author]

Posts