Background images

[Terry Gilliver]

I have an app with a background image. To do this I have the following in the page load event:

pre
Appery('mobilecontainer').css('background-image','url("' + Appery.getImagePath('gallery15.jpg') + '")');
Appery('mobilecontainer').css('background-repeat','no-repeat');
Appery('mobilecontainer').css('background-size','cover');
/pre

This looks great on my phone but on my tablet the bottom of the screen has a white background. How can I stretch the image (without losing aspect ratio) to fit the whole screen no matter what the device size?

I am getting something like this:

[Illya Stepanov]

Hi Terry,

Use the following code for background image:
precode
$('.ui-page').css('background-image', 'url("' + Appery.getImagePath('gallery15.jpg') + '")');
$('.ui-page').css('background-repeat', 'no-repeat');
$('.ui-page').css('background-size', 'cover');
/code/pre
add the picture in div with class .ui-page.

[Terry Gilliver]

I am unsure exactly what you mean.

I replace my code with the above in the load event, then add a html component of type div and give it a class of ui-page, then move my page components inside the html component?

[Yurii Orishchuk]

Hi Terry,

Following code works perfectly for me:

pre

var mobileContainer = jQuery('[name="mobilecontainer"]');
mobileContainer.css("background-image", "url(http://www.allwomens.ru/uploads/posts/2010-04/1270831868_god_tigra_dlya_rozhdennyx_v_god_tigra.jpg)")
mobileContainer.css('background-repeat','no-repeat');
mobileContainer.css('background-size','cover');

/pre

Please try this without changes. And if you still have a problem please give us your app public link and describe steps how to reproduce this issue.

Regards.

[Terry Gilliver]

That works for me too thanks.

[Mike6979865]

Hi,

I tried the above code, and the image doesn't resize, or fits the screen. I need the image to fit the screen, and resize based on screen size. Here are screen shots of how it's showing:

Also, what image size should i use that will be compatible with all devices?

[Illya Stepanov]

Hi Mike -

There is no such image resolution that will be compatible with all devices, it can be configured with CSS rules to have an responsive design for different screens.

And your image should have an appropriate resolution to fit the screen size.