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.
Related
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%;
}
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%
I am using a different background image for each page on my site using the HTML below:
<div class="bg_img">
<img src="images/bg1.jpg" alt="background" />
</div>
When using the site in IE and Firefox there is no problem but when using in Chrome there is a choppy / lag effect when scrolling.
I realised that when I remove the width:100% property the lag stops but I need it to scale the background images.
.bg_img img{
width:100%; <---- PROBLEM
position:fixed;
top:0px;
left:0px;
z-index:-1;
}
Is there something I could do to get around using width:100%?
I would totally change the approach to a full page background. There are better solutions than just setting a 100% which will ultimately cause a wrong image ratio.
Here's a way you could try.
.bg_img img{
background: url(bg_img.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
You can read more about full page backgrounds here.
These days, with all modern browsers supporting it, I would suggest using a background image instead, and using something like this:
background-size: cover;
That will keep the background image on the <body> element as wide as the screen. (For older, dodo browsers, you can just center it.)
There are options other than cover, but I suspect that's what will work best for you.
I created a background for my website using CSS code it successfully worked but the problem is once I run it on different screen whether it was big or small I don't get similar consequences. When I run it on 13 inch screen the browser zooms in and the form what I get is probably not the same as in 18 inch well it obviously wouldn't have the exactly form but more or less I need it to be shown look-like. any suggestions? thnx in advance
body {
background-image: url(../images/background.jpg);
background-repeat: no-repeat;
}
An addition problem I have now is that the background isn't full-screen. its resolution is 1920x1080, though I can see the picture on the whole web browser page but still I couldn't see other details of the photo.
I think you need
background-size: cover;
There are some browser inconsistencies, which might mean it is better to use a jquery plugin.
Have a look at http://srobbin.com/jquery-plugins/backstretch/ it allows you to use a background image which resizes depending on the size of the screen. It also deals with IE. Nuff said.
Also look at http://css-tricks.com/perfect-full-page-background-image/
I'm not 100% on what you are trying to achieve but the above links are worth a look.
This is the css3 way
html {
background: url(../images/background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I'm having a problem using responsive backgrounds. http://poppykeith.co.uk/index.html looks correct on computer browsers and in landscape on a mobile browser, however when viewed on a mobile (im using iOS) in portrait, the image is squished to fit the screen.
How would I go about making the image just zoom in in portrait mode and not stretch?
Thanks
The code you wrote almost works, but the min-width:1024px and the width:100% rules are conflicting with each other and causing the squishing effect you see. Basically, width trumps min-width.
The real technique you want to use is to set that image as a background on the body element, and then use background-size:cover to make the browser load it appropriately
body {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Details: http://css-tricks.com/perfect-full-page-background-image/
Check out this article: http://www.teknocat.org/blog/web-development/show/6/mobile-safari-background-image-scaling-quirk
It talks about how Mobile Safari likes to scale down large images.