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)
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'm hoping someone might be able to help me with an issue that is beginning to drive me a little bit insane ...
I am working on a new webpage - www.romaheritage.co.uk/beta - and I'm having an issue with a background image near the bottom of the page in the "contact" section. Testing the page with two different browsers, the road image appears in Firefox, but does not appear in Google Chrome and I have no idea why!
What's more frustrating is I have a background image set at the top of the page and this works in both browsers without an issue!
the CSS I'm using is this (although feel free to inspect the website itself);
background-image: url(../img/contact.jpg);
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
Any help anyone can give me would be gratefully received, because a bit like Neo in the Matrix, I'm now just seeing lines of code but getting lost in it ...
The issue is with background-attachment: fixed; remove that to make just make the image appear. Or add backface-visibility: hidden;, to .contact-parallax-bg restore the fixed effect.
.contact-us-section{
position: relative;
}
remove position relative and you will have "parallax" effect and image will be there
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 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 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.