Background Image causing footer to jump to top

[Melissa Fleetwood]

I have used css to display a fullscreen background image in my startScreen, however doing his has caused my startScreen footer to jump to underneath the header?
I have set the position to :fixed, but the problem is still there. thank you

[Alena Prykhodko]

Hi Melissa,

What exact code do you use?
Also please post a screen shot of this view.

[Melissa Fleetwood]

Hi Alena

My code is:

.ui-page {
background-image: url(http://appery.io/app/view/043bb27b-07...);
}

I have attached a screenshot. Also, my background image is covering my other content on the page.

Thank you

[Melissa Fleetwood]

Hi

I have added "margin:auto" to the css which now shows the footer in the correct position on the preview, however the background image in the container is still covering the content beneath it?

[Yurii Orishchuk]

Hi Melissa.

Please follow these steps:

1 Delete or comment all code that you have done before.

2 Open needed page and activate page mobileContainer. http://prntscr.com/3mnk70/direct

3 Set for this component "class name" as "myPageContentClass" http://prntscr.com/3mnkik/direct

4 Create new CSS asset. http://prntscr.com/3mnkog/direct

5 Populate it with following code: http://prntscr.com/3mnktm/direct

precode

.myPageContentClass{
background: url(https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTnLsVtG7ev0G3wmg9ASTGhtuQYIrHICdDLrk31fzCYZAIAh84JiQ);
}

/code/pre

That's all. Test it and you will get something like this: http://prntscr.com/3mnl5i/direct

Regards.