I have a div which has a background property on it. The background is a url which loads fine on all computers and browsers, loads fine on Android but doesn't load on iPhone.
Here is the style for the div:
background: url('http://emergypower.com/assets/images/attraction.png');
background-position: center -90px;
height: 590px;
width: 100%;
This is custom CSS, I am not using a framework for it. Furthermore, when the user opens the "tab view" on iPhone (to see all the Safari tabs that they have open) the image displays fine, however when opened in the real browser view it does not display.
I originally did not have the width set and thought that this may have caused the problems but have since edited it and it has made no difference.
Ethaan might be right but I prefer to use background-size: 100% cover; to ensure the image is always sizing to it's container.
It think I might have three possible solutions. It might depend on which iOS version you’re testing on.
An old fix for a bug with background-image on older iOS devices was to add -webkit-transform: translateZ(0); to the element.
Some older iOS versions has an image file size limit off 2290x2290px. Is the image to big?
Adding position: relative; and background-repeat: no-repeat; might do the trick.
Try changing the background to this.
background: url("http://emergypower.com/assets/images/attraction.png");
background-size: cover
add background size
background: url("http://emergypower.com/assets/images/attraction.png");
background-size: 100% 100%;
Related
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.
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
I have the following CSS for a div that spends 100% of the viewport.
.content
{
background-image: url('../images/content_bg.png');
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
color: white;
}
On desktop this works fine. Even when I scaled down the desktop window to mobile sized it stills looks as I want it to.
However, both on android and iPhone the background is scaled to entire size of the div, which greatly distorts it.
I want it to stay proportionate, but have the content scroll over it.
I also tried removing background-size: cover. This makes it look how I want it to, but it doesn't cover the div obviously, so I have a bunch of content that has spilled out.
I'm running a newer android and iPhone with the most recent updates, which I believe supports the fixed backgrounds, so I'm at a loss as to what is wrong. When I remove fixed the desktop version looks exactly like it does on mobile. So it appears for some reason that is the issue that fixed isn't being applied to mobile.
I have a background image assigned via background: url(""); to the body element. Now, its a really huge image and I want to focus the view exactly on the middle.
To understand what I want to do, imagine the following: Open an image on a touch-screen device like an iPhone or any Android phone. Now, pinch to zoom in to the center of the image, and imagine that each zoom-level is a different viewport of another device.
I want a specific part of my image to always be in the center. So far, I have tried tried to use background-{size,attachment,position} but couldn't get it right at all.
My current example is at http://dev.dragonsinn.tk - and the CSS is here: http://dev.dragonsinn.tk/themes/dragonsinn/css/main.ws.php
The current image is 1920x1080, so on most screens it will center almost correctly. But my local one is 1024x786 - which looks horrible so far...
What is the needed CSS, to even make an undersized image center? I can use media queries to make it bigger later. For now, I just want to really center it.
The following centres your image and scales it for different viewports.
See this link for more info on the background-size css property.
Also see http://caniuse.com/#feat=background-img-opts for browser support.
body {
background: url("/cdn/theme/images/bg.jpg");
background-color: black;
color: white;
height: 100%;
width: 100%;
background-repeat: no-repeat;
background-position: 0 0;
background-size: cover;
}
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)