Hi I built a site and everything seems to be working except the main Hero image shows up stretched on IOS devices. When I use dev tools to emulate these devices I don't have any issues, just on the actual devices. I have not had any issues with Android devices or desktop.
code https://github.com/sawyer1776/whale-animation
screenshot of stretched image
I'm not really sure where to start trouble shooting since when I try to simulate these devices with dev tools everything looks fine.
try this:
Give The section the height of 100vh and the hero content height 100%
hero-section {
height: 100vh;
}
.hero-content {
background-image: linear-gradient( to bottom, #04062e00, #04062e1e, #04062e86, #04062e ), url(../img/hero-bg.jpg);
background-size: cover;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
I found the answer here: Image stretching out only on iPhone x
sorry I thought I had searched extensively
Defining a width fixed the issue. Notably the issue was occurring on IOS devices across multiple browsers, not just Safari
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
When viewing my site from a IOS device the background image is not showing correctly. It works flawlessy on other devices such as Android, PC and MAC web browsers.
I have set these CSS elements which came with the bootstrap template and tried different combinations:
#header {
background-image:url(../img/HS_16.jpg);
-webkit-background-size:;
-moz-background-size:cover;
-o-background-size:;
background-size:cover;
background-position:center center;
background-attachment:fixed;
background-repeat:no-repeat;
position:relative;
min-height: 512px;
}
A bit hard to explain but if you go to http://holistiskasystrar.se from an IOS device and compare it to any other device, you see what i mean.
Click her for example, Left is iPhone, right is chrome
iOS Safari is know to have buggy behaviour with background-size: cover; and background-attachment: fixed;
It is listed under the "Known Issues" Tab here: http://caniuse.com/#search=background-size
But there are a bunch of workarounds online, for example CSS background-size: cover replacement for Mobile Safari
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 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%;