As documented, background images will be scaled to fit the view’s dimensions. You can use nine-patch images on Android or
background[Left|Top]Cap on iOS to determine what part is scaled, but scaled it is.
Full-size background photo
If you want your app to have a nice background photo regardless of the screen size and aspect ratio (I’m looking at you Android!) you will need the image to fill the – initially unknown – dimensions of the view while respecting the image’s aspect ratio. Out of the box, there is no solution for this in Titanium.
Custom view factories
Fortunately, in both Classic and Alloy you can use custom view factories. So I created one wrapping
Ti.UI.createView that adds support for the background-size:cover property known from CSS.
- Get it from my UTiL repo.
How it works
If you set a
height property, it will convert any unit to the required
px for the device. If you don’t, it will add a
postlayout event listener to get them when the view is layed out. Of course the resized images are cached, but if you don’t even want to wait for
postlayout, then use the
backgroundTarget property to pass a string to identify the target. Use this only if you are sure the layed out dimensions will always be the same for that particular view.
How to use
Assuming you have
app/lib, use it like demonstrated in the following example. Of course best practice would be to have these properties in the TSS.
<Alloy> <View module="ui" backgroundImage="images/background.jpg" backgroundSize="cover" backgroundTarget="myView" /> </Alloy>
How it compares
Scaled like demonstrated in the docs:
The same images using