For some reason, my background images disappear in Microsoft edge when using background-attachment: fixed. However works fine in IE, Chrome and Firefox.
css is as followed:
header
{
text-align: center;
color: #eee;
background: url(../img/portfolio/66.jpg);
background-size: cover;
background-position: 70% 0%;
background-attachment: fixed;
background-repeat: no-repeat;
}
Any ideas?
Regards,
Steve
I have similar issue on my new parallax project, i am not sure is it because i set my div background-attachment: fixed; or overflow:hidden.
But when I tried to move my background css to innner div like below, my problem solved.
<div class"header"><div class="bg"></div></div>
Related
My background image still moves a few millimeter up while scrolling up and a few millimeter down while scrolling down. And I've looked up some possible methods to fixing this issue but all I got was to place z-index as -1; and that I did, but still moves while scrolling.
Here is a short clip of what it looks like.
https://mittsspp.000webhostapp.com/20201221023609.mp4
Please what can I do to make this background image standstill while scrolling possibly in all browsers.
Here's a snippet of the code
body {
background-image: url(https://mittsspp.000webhostapp.com/Pictures/panoramic-3267048.jpg);
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: rgba(0,60,105);
z-index: -1;
}
Try
background-attachment: fixed;
background-position: center;
Trying to fix the issue with the background image for my title div to make it fully responsive.
Issue is: the size of the background image blows up on iPad Pro in landscape.
It works correctly on desktops, also shows up correctly in Chrome Dev tools for responsive/iPad Pro landscape. The only instance I currently observe this issue is - iPad Pro landscape (both Safari and Chrome).
See code and screenshots attached.
Website: rita.im
Size of title.jpg file is 2464 × 1632
CSS for the Div
`.bgimage {
position: relative;
background-image: url(../img/title.jpg);
background-repeat: no-repeat;
background-size: cover;
-ms-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
background-position: top center;
width: 100%;
height:100vh;
bottom: 0;
overflow: hidden;
background-attachment: fixed;
background-color: #fff;
margin: 0;
padding: 0;
}`
Chrome Dev tools preview
Actual iPad Pro landscape display
Thank you! Will post answer if I resolve the issue myself first.
background-attachment: fixed;
, which was there for "parallax" effect seems to have been the problem. Without it, background images display at correct scale. Will have to find a way to add parallax for banner on iOS with JavaScript.
How could I use background fixed property on iOS devices considering this CSS:
.sfondopertutti {
background-attachment: fixed !important;
background-image:url('../../sfondo.jpg');
background-repeat: no-repeat;
min-height: 100%;
background-position: center center;
background-size: cover !important;
}
Works everywhere except on iPhone and iPad? I know this is an old question but I've found only old wrong solution to the problem and I don't know what to do.
Using a position:fixed div with background prevents page scrolling.
My header image on my website (dorinart.com) is perfectly positioned in all browsers including android mobile browsers but when I open it on IOS (iphone, ipad) it only shows the top right corner of the image (you can check if you open dorinart.com). How could I resolve this issue?
my css looks like this:
.header{
background: url('../img/banner5.jpg');
background-repeat: no-repeat;
position: fixed;
background-size: cover;
min-height: 730px;
position: relative;
}
Can you try this CSS? I think you want to center the image in the space available right? Please let me know if this works:
.header{
background-image: url('../img/banner5.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position-x: center;
min-height: 760px;
position: relative;
}
If you don't want it centered, then just remove the background-position-x property.
Hope this helps. Thanks.
Update: Attached screenshot from simulator:
I have had a similar issue recently and realised that it's due to background-size:cover with background-attachment:fixed.
In your website its like this:
background: url('../img/banner5.jpg') no-repeat fixed;
background-size: cover;
min-height: 760px;
position: relative;
Here the background-attachment:fixed is the problem.
I solved the issue by using a media query for iPhone and setting background-attachment property to scroll.
So what you can do is use this:
.header{
background-size: cover;
background-attachment: fixed;
#media (max-width: #iphone-screen) {
background-attachment: scroll;
}
}
I am attaching the 2 sample images I am using so you can get the idea.
This is the body background:
This is the fixed position div's background:
And above those two there is the content. The whole website. Between those two there are some moving stars in pure css with no interaction.
But here comes the problem. While the user scrolls the fixed background breaks in parts, stucks in positioning and sometimes the body background image disappears and shows only color in the back - all that while scrolling.
body {
font-family: 'LatoRegular', 'Lucida Grande', Helvetica, sans-serif !important;
line-height: 21px;
color: #636e7b;
overflow: hidden; /*removes it after preloader quits*/
position: relative;
background: #1d2939 url("../images/backgroundv2.jpg") fixed;
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center top;
}
#fix {
background: transparent url("../images/backgroundv2.png") fixed;
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center top;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 1;
-webkit-transform: translateZ(0);
}
Any idea will be appreciated.
(This is the bugged version http://i.imgur.com/bn0fG3j.jpg while scrolling)
well, I played around with your code,and it works as you intended, I would probably have done it in some other way, the code seems a bit messy but it does what you trying to achieve, check this fiddle:
http://jsfiddle.net/domusnetwork/Lkrkp/
and maybe tell me if I misunderstood you.
anyways..
I think that your problem comes from the elements you've stack on top of your background,
try using the next code snippet, it's worth a shot:
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
and if that won't help try implementing one of the techniques in the next article:
http://css-tricks.com/perfect-full-page-background-image/
have a nice day :)
Thank you for the answers.
Fortunately I've found the problem. It was the moving stars. They were made by idea from codepen's author using simple css with massive ammount of box-shadows as dots in 3 divs (sizes). Due the high ammount of stars it requires a lot of painting on the page while scrolling. When I removed one of the star sizes the scrolling is fine, the background stopped disappearing and it's all fine.
Seems like performance has to be above all.