I am using this CSS to create a parallax effect with images that are the background of section elements.
background-image: url(./../img/intro.png);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed !important;
background-size: cover !important;
When I view the site on iPads or iPhones the images are crazy zoomed in and distorted. Research would have me believe that on these devices the images are being stretched to the size of the body. I have tried so many fixes from various forums etc but to no avail. I am really surprised there is no concrete fix for this as it seems quite common.
Related
I have a background image for my hero section. On some screen, the background image fits perfectly. However, on some other screens such as my iPhone, it's really way too zoomed in.
I tried solutions on Stack Overflow, such as background-size:contain or background-size:100%, but I end up with like a background that it is repeated 3-4 times. Here is my code for the background:
.bg-hero {
background-image: url('/img/background.jpg');
background-size: cover;
background-position: center;
background-attachment: fixed;
}
UPDATE the initial answer raised the question of background-attachment: fixed which can cause problems in some combinations of settings. However, in this case testing with different aspect ratios images and leaving the fixed in I was unable to recreate the problem, the background-size: cover worked in both orientations. I leave the info below here for now in case it helps point to something that is causing the problem.
Original:
The problem may be in these settings:
.bg-hero {
background-image: url('/img/background.jpg');
background-size: cover;
background-position: center;
background-attachment: fixed;
}
background-attachment: fixed is not supported in IOS. Depending on what version it can lead to e.g. overstretched image (though this question talks of zooming in rather than stretching). See https://caniuse.com/?search=background-attachment but the background-size: cover should have got round that for you.
Partial support refers to supporting local but not fixed
The dimensions of the image you are using for the background are not appropriate for mobile screens. The image you are using has landscape orientation. There are two things you can do :
Use different image having portrait orientation. And add media query in your CSS code.
This approach might not be suitable but you can give it a try. Instead of using image as background, use a relevant color for background (like some shade of brown in this case), and add image as a separate element in your HTML. You can again manage the size of image using media queries. And make sure you position image element as fixed.
Try min-height and check one
.bg-hero {
background-image: url('/img/background.jpg');
background-size: cover;
background-position: center;
background-attachment: fixed;
min-height:100vh;
}
How could I use background fixed property on iOS devices considering this CSS:
.sfondopertutti {
background-attachment: fixed !important;
background-image:url('../../sfondo.jpg');
background-repeat: no-repeat;
min-height: 100%;
background-position: center center;
background-size: cover !important;
}
Works everywhere except on iPhone and iPad? I know this is an old question but I've found only old wrong solution to the problem and I don't know what to do.
Using a position:fixed div with background prevents page scrolling.
I need help and I did not found any proper answer so far. I want to make background image on my website that is full width and height and responsive to any resolution and it is ok but problem is when I put other images ( I have 7 images over background img ). I place them and set with media query for every resolution and it is ok only when is fullscreen but when I watch regularly with address bar and bookmark bar in my browser it all messes around and even my background picture is not full width and height anymore. Sorry for bad English.
CSS for body:
body {
background-image: url('images/background1.jpg');
background-repeat: no-repeat;
background-position: top center;
background-attachment: scroll;
background-size: 100% 100%;
height: 100vh;
margin: 0px;
}
Then I put my images and with margin - left, right, bottom, top place them for different screen resolution in media query.
Do I need to set proper position to images or something else? Please give me a hint.
Edit:
This is what I get in fullscreen and it is ok
But this is when is not fullscreen
All are images except strips, those are part of background image.
Images have only margin style, nothing else. They are in divs with float style.
The easiest way to make background images responsive is this:
img{
background-image: url('.../your-image.jpg');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
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.
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.