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
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.
Before you try to close: I know that there are similar questions and answers out there, however none of these solutions work for me, rather just locking scrolling all together. This could possibly be because I am using a website template from w3schools.
I am making a website for a school project where I would like the background to be a picture of tree leaves. Unfortunately, this image doesn't seem to cover the full page, causing it to repeat downwards. This is an issue.
I have used background-attachment: fixed; to solve this issue on chrome (for windows), but have discovered that safari does not support this.
The website's code can be accessed: here. (Control + U for page source)
tldr; I need to find an equivalent to background-attachment: fixed; for safari that works for my website.
TIP: You will have to test the page in safari to see the issue.
You can't keep the background on the actual body in this case because of the Safari attachment-fixed problem as you point out.
You can however put the background on a pseudo element and then use the 'ordinary' CSS fixed position so it stays in place even as you scroll down.
Here's a basic example:
body {
width: 100vw;
height: 200vh;
margin: 0;
padding: 0;
}
body::before {
content: '';
position: fixed;
width: 100vw;
height: 100vh;
background-image: url("https://hdwallsource.com/img/2014/5/green-background-21874-22427-hd-wallpapers.jpg");
background-size: cover;
z-index: -1; /* added */
}
Note: the background size is set to cover so the whole viewport is covered whatever its aspect ratio (some of the img may get cropped either top/bottom or at the sides so that it fits).
I have created a webdesign with used body:before tag to 'split' the design, similar to the TwentyFifteen theme of WordPress (https://wordpress.org/themes/twentyfifteen/)
But I don't use a color for the "left" column, but an image. The Code works in all browsers fine (Chrome, FF, Safari) but not in IE (Version 9-11).
The CSS looks like:
body::before {
background: url("img/back-left.jpg") no-repeat center top ;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
content: "";
display: block;
height: 100%;
min-height: 100%;
position: fixed;
top: 0;
left: 0;
width: 30%;
z-index: 1;
}
The effect: the background picture was not showing, when open the page with IE. When I go to a sub-site, the picture was showing. When I transform the browser windows, the picture was showing. When I change ANYTHING (no matter what) in IE Dev toolbar, the picture was showing.
If I use background-color instead of background (or background-image), it works fine on IE.
Any ideas? I think it sounds like a rendering thing. The background image was rendered too late and so was not showing (instead I interact everthing on the page). But how to fix it?
I found a 'solution', that run into an other problem. ;-)
When I set
html, body { overflow: auto; }
Then, the background-image was displayed proper in IE 10 and IE 11. But now I have the IE 11 smooth scrolling problem (The background image jump all over the place when using the mouse wheel. When using the scrollbar, it works fine).
Anyway, this variant is better for me, than not displaying the background-image. So I still hoping, that MS correct the smooth-scrolling bug.
I made a fork in CodePen with this correction: http://codepen.io/anon/pen/rabMMm
(this was the originally CodePen code: http://codepen.io/anon/pen/qEwEVy)
Or did any knows a solution to fix the smooth scrolling prolem from IE?
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%;
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)