When I resize the window of my desktop computer, it fits well to new sizes, however, on the real mobile devices, (iPad and iPhone, I didn't try in others) the background images appear extremely zoomed that you can't even notice there is a image, and doesn't look good. How can I fix that?
I have the same problem and did some digging....I think it is because iOS devices do not support the "background-attachment: fixed" property.
So what i did was use a script which loads an extra css file if it detects an iOS device like so: http://stackoverflow.com/questions/19932023/add-a-css-stylesheet-only-for-ios-devices
and in this css file declare "background-attachment: scroll !important" for all background images. So now yes the backgrounds show up properly...but they will scroll in the viewport (unlike the desktop versions which stay fixed).
New version with fixed background on mobile devices is under review on wrapbootstrap, for now you can check it here http://fresh.tomaj.sk/v1.1/images.html
When I resize the window of my desktop […]
I have the same problem and did some digging....I think it is because iOS devices do not support the "background-attachment: fixed" property.
So what i did was use a script which loads an extra css file if it detects an iOS device like so:
http://stackoverflow.com/questions/19932023/add-a-css-stylesheet-only-for-ios-devices
and in this css file declare "background-attachment: scroll !important" for all background images. So now yes the backgrounds show up properly...but they will scroll in the viewport (unlike the desktop versions which stay fixed).
Not the best....but at least the bgs look ok now.
Hope this helps.