CSS background HELP not scaling for ipad or phone

[mqn]

Hi,
Can someone help me get this to also work for other formats? The image does not seem to scale for tablet or phone.

http://www.qndesign.com

Thanks in advance..Melissa

[nixnerd]

You want it to get smaller and be able to see all the things you do when it’s big?

This will always pose some problems that you will never be able to fully get rid of. The biggest problem is and always will be aspect ratio. See, it’s easy to make things accommodate various screen sizes… what’s not easy is making sure your photo NEVER gets cut off, no matter what the aspect ratio is. As a matter of fact, due to the laws of physics. It cannot be done.

Try this:

background-size: cover;

This will work. It will get smaller and you’ll be able to see most of the stuff in the photos… but at certain aspect ratios… things will get cut off. You have to be ok with that. Sorry :(

[mqn]

Hi Joe- I actually do have that in my css..

#wiredmag {
float: left;
top: 0;
left: 0;
width: 100%;
min-height: 100%;
background: url(../img/wired_1.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color: #FFFFFF;
}

[nixnerd]

Ahh, when I inspected it, it looked like background-size: auto auto;

Try replacing min-height: 100%; withheight: 100%; you should need to set a min-height because cover takes care of that for you.

[mqn]

I did as you said and still not working for phone or ipad. they are not scaling down for the window size. : (

Is there any window detection code?

[nixnerd]

Is there any window detection code?

You can do this with JS but it’s not totally ideal.

Is the “phone” in question by change a iPhone? I had a similar problem… well really the exact same problem. I never got it figured out because this code for some reason confuses the iPhone… even though it shouldn’t (because its prefixed). I experienced this issue on both Mobile Safari and Chrome if memory serves me.

I searched the forums for it but I can’t find it… @TheDoc had some similar issue that involved an iPhone and infinite scroll. BUT… I remember someone on that thread had something that I thought might help me… until I changed the design to rid myself of the problem. Perhaps he can help if he’s not too busy up there.

[nixnerd]

@TheDoc had some similar issue that involved an iPhone and infinite scroll.

He might not have even been the OP on that thread… I hope he knows what I’m talking about. I just remember seeing his mug when I was reading through it :)

[mqn]

Thanks much!! Sure wish i knew this issue before I took on this beast- ha thanks again m

[Author]

Posts