Sorry if this has been answered elsewhere; the only other place I could find this issue mentioned is here but the answer given there doesn't seem relevant to my site, but I'm happy to be proven wrong.
I'm working on a site in Next.js (although I don't think the framework is relevant because this project used to be create-react-app and the same issue occurred) and our site background is a fixed starry-sky image. I'm applying that across the site by doing this in my global app.scss filesheet:
html {
background-image: url(../public/images/background.jpg);
background-size: cover;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-color: black;
}
This works perfectly on my desktop browser – on all viewport sizes. The first screenshot is how the site looks when using Chrome's devtools to simulate a mobile display, after reloading the site from scratch with that viewport and everything. The second screenshot is when opening the site from an actual mobile device (an iPhone XS on the Chrome mobile browser). You can see that the background image is super zoomed-in:
I don't know how I could inspect the styles being applied on my phone browser, so it's hard to figure out the cause of this. Anybody have any ideas?
Maybe it stretchs because of background-size: cover;. Depends how much you can scroll. I would change this property: background-repeat: repeat-y;. Happend to me once as well.
Somehow I had missed this question, which says that background-attachment: fixed is unsuppored on mobile browsers. So I gave up applying the image as a background to the html element and instead added a <div id="background" /> with this styling:
#background {
z-index: -1;
background-image: url(../public/images/background.jpg);
height: 100vh;
width: 100vw;
position: fixed;
background-size: cover;
background-position: center;
}
That fixed the issue.
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;
}
I try to have 4 full-screen background image ( i think it's called hero section) on my page.
I used this style for every row with full-screen background.
.kimiabg {
background: url(http://kimia-tak.com/wp-content/uploads/2018/02/s2.jpg);
background-size: cover;
background-attachment: fixed;
width: 100%;
height: 100vh;
padding: 2rem 0;
}
everything is fine. unless showing background on iphone. it is blurry. I really do not know what is the problem.
you can check the live website here : http://kimia-tak.com
The background-attachment: fixed; is the problem. This is not really supported on iOS Safari.
Can I use background-attachment ?
iOS Safari:
Partial support refers to supporting local but not fixed
Only supports local when -webkit-overflow-scrolling: touch is not used
https://caniuse.com/#search=background-attachment
For more information and workarounds you can look at the answer from #fernandopasik to a similar question: https://stackoverflow.com/a/23420490/7426156
So I've seen other people posting about similar problems and I've tried their solutions but none of them have worked.
On desktop, the header background image works perfectly. Even when I resize the window to that of a mobile size, it works. But when I load it on an actual mobile device, the background image doesn't show up. I've discovered that if I remove the background-position: center center;, the background image does show up on mobile, but it's distorted.
So, my question is: how can I make the background image show up on mobile without it looking distorted.
My CSS for the header container in question is:
header {
width: 100%;
height: 100%;
background-size: cover;
background-position: center center;
background-attachment: fixed;
background-image: url(../img/header-background.jpg);
position: relative;
}
You can see it in action at: http://coledavidson103.github.io/davidsoncreative/.
Again, the problem only presents itself on a mobile device. It doesn't even happen when I use Inspector to emulate a mobile device.
Thanks in advance!
EDIT:
Here is a screenshot of the problem when I include background-position: center center. You'll notice that the image doesn't show up.
Here is a screenshot of the problem with background-position is not included. You'll notice the image is distorted.
change background-size: cover to background-size:100% 100%.
I'm building a website that uses fixed background images to transition between sections. Currently, it is pure CSS. The effect works on every browser that I've tested it in, except for one: Chrome on Mac (Version 33.0.1750.146 or Version 34.0.1847.45 beta). Seems to work fine on Chrome on PC.
What happens is pretty strange...on scroll, the image is repeated and overlayed and overall very distorted. After a bit more scroll, it disappears. It does not reappear on scroll up.
Any ideas or solutions?!
Current page: http://margusity.com/follies-beta
Current screenshot (broken, chrome): http://cloud.ikilledtheinter.net/ULra
Current screenshot (working, safari): http://cloud.ikilledtheinter.net/ULxH
Seemingly relevant CSS:
.chris, .eric, {
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed;
position: relative;
z-index: 50;
width: 100%;
height: 100%;
}
.chris {
background-image: url(../img/people/chris.png);
}
.eric {
background-image: url(../img/people/eric.png);
}
Edit: It seems to be the fixed background element that is causing the issue. Removing "position:fixed" from #behind (css not shown above) fixes the issue above, but does not solve my requirements. Working on a solution now!
I'm running into this same issue. It looks like your site is working now, can you share your solution?
EDIT: Removing position: relative; and setting the html and body to both have height: 100%; solved my problem.
Switching an unnested position:fixed element out fixed the problem. I'm not sure why.
To fully solve the problem, I set the body to contain an attachment:fixed background image that the other elements all scrolled over, with their respective attachment:fixed background images. I would however like to know why the original failed in only Chrome on Mac on some browsers, yet worked everywhere else -__-
Chrome 38 Canary, Windows 8.1
Same Error: http://puu.sh/aOKEH/77538a9a01.jpg
Many other Pages bug out too.. (Twitter Fixed Background for example)
I have a mobile web application based on jQM. I have a background image with the following styles applied to it:
body.ui-mobile-viewport .ui-page
{
background: url('images/bg-texture.jpg') no-repeat fixed left bottom;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: cover;
}
The thing is, this works fine on iOS, Chrome for Android but on ICS native browser and Dolphin browser, the background sticks to the top of the page like this after scrolling starts:
After some action, (like tapping on an element, the background comes back to focus like this:
I checked on the internet, did extensive research but obviously Im missing something. These are the links of the solutions I've tried:
SO link 1
SO link 2
What you see on top (I mean the CSS) is the default un-edited style applied.
Note:
Ive tried supersized plugin as well, and it works for GingerBread devices and when the content in the page is static.
On ICS devices, I'm not able to scroll beyond the viewport if its applied to a page with dynamic content.
The same problem happens when I try to create an img tag in the body of the page with src set to the path where the image is located.
THESE PROBLEMS OCCUR ONLY ICS NATIVE BROWSER.
Please tell me if I'm doing something wrong. Is there a pure CSS solution for this? (Obviously something is hugely wrong)
Try this:
body.ui-mobile-viewport .ui-page
{
background: url('images/bg-texture.jpg') no-repeat fixed left bottom;
background-size: cover;
}
The following CSS for "html" solves my issues with full page background images on Android devices:
html{
height:100%;
width:100%
}
body{
background-image:url(img/background.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
Hope that helps.