Forum | Appery.io

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?

Hi Austin,

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

Can you post the code you are using?

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') + '")');

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.

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

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.

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;
}

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;
}

Thank you for update!