Header and Footer Background images

[Austin Troth]

Background images on the header and footer are not staying when I get the app to my phone; however, they do appear in the preview before hand. They are currently written in the CSS with a link to the image I get when I place the image on the page. The main background is written as a load script but I couldn't get it to work the same with the other two. Any advice?

[Illya Stepanov]

Hi Austin,

On what device you're testing? (OS version)

Can you post the code you are using?

[Austin Troth]

Hey Illya,

I am testing on an android 4.1.2 Phone and a 4.2.1 Tablet

The CSS goes as follows:

.withoutCaption h1{
display: none !important;
}
.withoutCaption{
background-color: transparent !important;
background-image: url(http://appery.io/app/view/1b39007f-68... 26b8ed58011d/files/views/assets/image/bottom_bg.jpg) !important;
background-repeat: no-repeat;
Background-size: cover;
border: none;

}

The load java function that doesn't work is:

Appery('mobileheader').css('background-image','url("' + Appery.getImagePath('bottom_bg.jpg') + '")');

The load java function that does work looks like:

Appery('mobilecontainer').css('background-image','url("' + Appery.getImagePath('main_bg.jpg') + '")');

[Austin Troth]

I discovered that the java function IS working however it is applying the background to the H1 of the header instead of the whole header. any way of adding to that command to force it to apply to the whole header? I can't find any other DSIDs in the code.

[Maryna Brodina]

Hello!
Use relative path to image instead absolute, this should help https://getsatisfaction.com/apperyio/...

[Austin Troth]

Hey Maryna,
I did try that and in the preview it wouldn't even show the background at all unless I used the absolute. Maybe it will do it once I get it to the app. I'll get back to you.

[Austin Troth]

Tried it again, and downloaded the app to my phone with no luck.

.footer {
background-image: url(files/views/assets/image/bottom_bg.jpg);
background-repeat: no-repeat;
Background-size: cover;
border: none;
}

[Austin Troth]

I got it, the url was the key. I had to figure out how to start it. once I did that everything went great!. thanks for your help

end code was:

.footer {
background-image: url(../image/bottom_bg.jpg);
background-repeat: no-repeat;
Background-size: cover;
border: none;
}

[Maryna Brodina]

Thank you for update!