My site is essentially a row of alternating full-width divs and images.
I'm experiencing weird behavior on mobile devices (iPhone and iPad, specifically). The page loads fine. When I rotate the phone, the image distorts to a super-massive size. When I rotate it back, it distorts to an even greater size. Essentially, the image becomes unusable.
Questions: Why does this happen? Is there a better way to implement the CSS so this can be avoided? If not, what's the simplest javascript fix to the problem?
Here's the CSS for the image div:
div.pic-container-1
{
width: 100%;
height: 80vh;
background: url(../images/rt2.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Here are screenshots (iPhone):
Initial load:
Rotate to landscape:
Back to portrait:
Change
height:80vh
to
height:80%
Related
I wanted to give my web page background on which all elements will be so I added this to my CSS file:
body {
background: url("../img/pic.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
And it works as expected on web browsers. The background image is fixed in position and while scrolling, only the elements in body tag moves but not the picture.
BUT that doesn't work for mobile phones...When I open it on my mobile phone that same background picture is shown but zoomed like few times, it won't resize nicely as it looks like when I shrink my web browser on my PC to see a preview on smaller screens.
I tried few pictures, bigger, smaller, different ratios, but nothing helped. I even added
#media screen and (max-width: 479px) {
body {
background: url("../img/pic.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;}}
so I could have a special picture to be shown on mobile devices but no matter which picture I select/upload it always distorts it with that zoom.
I am using bootstrap and still learning. I have some stock files from some templates which I used but searching through them hoping to find somebody CSS which overwrites my own body CSS and zooms on the image but couldn't find any. heh
On phone fixed background work bad on lot of OS.
So try this :
background-attachment: initial;
Or use body:before to set the background.
More solutions here :
background: fixed no repeat not working on mobile
Try this solution:
#media(max-width: 767px) {
body {
background-size: 100%;
background-attachment: initial;
background-position: center;
background-repeat: no-repeat;
}
}
Your problem is propably in declaration of #media tag. It should be #media(max-width: 767px).
I've some trouble with a parallax background image on mobile. When it's displayed on mobile the image is zoomed right in so I cannot see what it is, it doesn't matter if I use it in landscape or portrait. The same problem occurs also on tablet.
I tried it with background-size: 100% auto; now you can see it, but it's just plain ugly.
Also tried background-size: contain; but that also didn't do the job and messed up the desktop view too.
Also the parallax function isn't working on mobile either way but that doesn't matter to me.
The same problem occurs also on tablet.
Here's what you see on mobile, when I use background-size: cover;
Here's what you see on mobile, when I use background-size: 100% auto;
.intro {
position: relative;
width: 100%;
height: 100%;
color: #fff;
background-color: #111;
min-height: 600px;
padding: 0;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center center;
overflow: hidden;
background-attachment: fixed;
}
<section id="intro" style="background-image: url('img/background.jpg'); no-repeat;" class="intro">
I'm thankful for any help
P.S. i'm new here, so I hope I asked the right way :)
background-size:cover would be the right way to go in your case.
The reason it's zoomed in is because background-size: cover tries to fill the full viewport (which you defined with height:100% and width:100%). Your image is just not optimized for mobile phones. I bet if you hold your Phone in landscape mode it would look nice. This is because your image has a higher width than height.
I'd suggest using a second image which you then use on mobile devices. You can use a basic image editing tool such as paint, or paint.net to cut out a piece of your image that will work on your mobile phone.
I have tried for two days now to make the background img responsive for a mobile. It's a one long home page (around 8000px). The content of the whole page has a div parent "background_div". I have tried both, size cover or contain tags, the img gets over pixaleted, like it would be zoomed in, the content is responsive but the background img gives me a headache. I need it to recognize the device width, scale down and stay fixed not stretched along the 8000px long page. Can any one give me an idea whats wrong here?
#background_div {
background-image: url('home.jpg');
background-repeat: no-repeat;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed;
}
/*It just won't scale to the divice width and height*/
<div id="background_div">
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
Setting these to cover is going to stretch the image to fit the container, no matter how big it is. That is what's causing your stretching.
Set them to auto, or don't set them at all, if you want the image to retain it's original size.
CSS2
If you need to make the image bigger, you must edit the image itself in an image editor.
If you use the img tag, you can change the size, but that would not give you the desired result if you need the image to be background for some other content (and it will not repeat itself like you seems to want)...
CSS3 unleash the powers
This is possible to do in CSS3 with background-size.
All modern browsers support this, so unless you need to support old browsers, this is the way to do it.
Supported browsers:
Mozilla Firefox 4.0+ (Gecko 2.0+), Microsoft Internet Explorer 9.0+, Opera 10.0+, Safari 4.1+ (webkit 532) and Chrome 3.0+.
#background_div {
/* width: will stretch to width / height of element */
background-size: 100% 100%;
}
I created a background image for my website in photoshop and i want it to apply on my webpage as it look like in photoshop.
How can i use the created image for my website background without using repeat property in css. I want this background to fill the screen without losing any effects/gradients and works with every resolution.
Can i do it without exporting image in full resolution of screen? Or any other alternative way. Or i need to do it with exporting in full resolution of screen.
To create full screen image use css:
html {
background: #e7e9ef url('image.jpg') no-repeat center center fixed;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 100%;
}
body {
min-height: 100%;
margin: 0;
padding: 0;
}
Your image not have to be full image screen resolution - it will be stretched but of course to achieve decent effect you should rather use quite big image - I used 1920px x 1285px but of course it need to be compressed as much as possible.
You should also consider what happened if user visit website using mobile devices. Big images takes a lot of transfer so you should also consider preparing smaller images and use media queries to give such user smaller image.
My site's background image is resizing nicely in Chrome and Safari using background-size: cover, but when I go to test my website on an ipad or iphone, the CSS background image is really zoomed in and looks horrible. I've read lots of other questions on here relating to this and none have solved my problem.
HTML
<div class="background">
</div><!--background-->
.background has no container and is 100% width of the screen.
CSS
.background {
height:600px;
width:100%;
position:relative;
background: url(css/img/strand.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I had the same issue, I used SCROLL instead of FIXED.
background-attachment:scroll;
Apparently, the iPad's Safari is downsampling images above the 1024px threshold. I had tried using scroll instead of fixed but that wasn't successful. Other tricks didn't work for me either.
I solved this by splitting my originally-too-large 1600×1600 image into two images. Because of that, I was able to use two 1024px sized images and achieved an even better readability than before.
Maybe a workaround like that would work for you, too.