View Full Version : background images of nested divs are being compressed.

29 Jul 2010, 2:04 AM
In Sencha, if a div is to have a background image that may overflow the size of the div (usually too tall) does it still overflow properly? (ie, fit the width, but the lower portion flows out of sight)

The reason I ask is that some of my images which are scaled for portrait are being compressed when displayed in landscape.

You can see an example here: http://straathof.acadnet.ca/beta1.4/

These are being set up as background images for a div as a classh:

/* landscape */
.background {
-moz-background-size: 480px auto;
-webkit-background-size: 480px auto;
background-size: 480px auto;
background-position:top center;

/* portrait */
.background {
-moz-background-size: auto 480px;
-webkit-background-size: auto 480px;
background-size: auto 480px;
background-position:top center;

These divs are moved within a carousel, allowing other elements to flow overtop.

29 Jul 2010, 10:34 AM
Is there an answer for this problem? Even an answer that states "there is no answer" is better than just having another question be ignored.

29 Jul 2010, 6:28 PM
I don't really understand what you're asking, however it seems like this doesn't really have anything to do with Touch. As far as I can see you're just styling them with css, so normal css styling rules apply.

29 Jul 2010, 7:42 PM
Thank you Evant,

This problem appeared to have something to do with Sencha since it works on the background, but not on a nested div. The overflow was misbehaving, and that may be something the I haven't been able to discover while reading on background images on the body versus a normal div.

However, I have just opted to use an actual image in the div, not a background, since it doesn't change in this method. It's to be used for an article in a publication that does not have a changing image (think of spreads or advertisements)

Using an image, however, does allow me to have the height change, and (I hope) move the image up to keep the centre in the centre... More experimentation is necessary.