I have a div with a background-attachment: fixed CSS style to achieve a parallax effect which works perfectly in chrome but does not work in Safari. It causes extreme jittering when scrolling past in Safari, so much so that it is not possible to leave as is. When I comment out this CSS property the jittering is stopped (which highlights the problem is this specific styling property). I have looked at other posts on this but have yet to find something that fixes this behaviour or provides a workaround.
CSS:
#gallery {
background: url("../images/parallax-image.jpg");
background-size: cover;
background-position: top right;
background-attachment: fixed;
height: 45vh;
position: relative;
}
iOS has an issue preventing background-attachment: fixed from being used with background-size: cover. from "Can I Use".
could check on Can I Use tab "Known issues".
https://caniuse.com/#search=background-attachment
and fine details link
Background size on iOS
maybe "background-size: 100% 100%;" could help.
or use other div background like below.
sorry i don't has ios could check it work.
body{
height: 200vh;
}
.container{
position: relative;
height: 1920px;
}
.bgc{
position: absolute;
top: 0;
left: 0;
width: 1920px;
height: 1080px;
background-image: url('https://picsum.photos/1920/1080/?random=1');
background-attachment: fixed;
}
<div class="container">
<div class="bgc">
</div>
</div>
Related
I found the below code on stack overflow and was hoping for some clarity. I am updating my portfolio page and wanted to put a landscape image background but how it looks on my laptop (the way I want it to look) does not translate over to my second monitor which is much larger. If I were to implement something similar to the below code would this help alleviate the issue so I can ensure that my page is identical across all sceens?
.background-wrapper {
left: 0px;
top: 0px;
width: 100%;
height: 250px;
display: block;
overflow: hidden;
background-color:#ccc;
background-image: url(https://psuk.s3.amazonaws.com/asset/p4/image/c3c59e5f8b3e9753913f4d435b53c308/Shaun/3040ce690fce2054c2011cf6d2f8b537.jpg);
background-position: 50% 50%;
/* By defining this, your image _will_ be cut off when the screen is
* wider than 1920px, but since you don't want to stretch this would
* happen anyway. */
background-size: 1920px auto;
}
You can try this for a simple example of a fullscreen background image. You can edit the min-height value to get the effect you want.
Example: https://codepen.io/brooksrelyt/pen/REzMZW
HTML:
<div class="full-home" style="background-image:url('https://via.placeholder.com/1200x800');" ></div>
CSS:
.full-home {
width: 100%;
background-repeat:no-repeat;
background-position:50% 50%;
background-position:50% 50%\9 !important;
background-size: cover;
min-height: 100vh;
}
my background on my div is not loading properly on iphone when using safari or chrome.it is completely responsive in Mozilla however in safari and chrome it still loads as a 100%width and 100%height.
it is the background image of the "sect" div.
this is my html
<div class="sect">
<H1>ALESH</h1>
<h2>This is me</h2>
<FORM METHOD="LINK" ACTION="Artbook.html">
<INPUT TYPE="submit" VALUE="explore my work" class="button1">
</FORM>
</div>
this is my css for pc
html, body {
height: 100%;
background-color: white;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
}
.sect {
height: 100%;
width: 100%;
background-position: absolute;
background: url("homepage/photos/b1.jpg") no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
padding: 0;
left: 0;
Right: 0;
margin: auto;
top: -2px;
overflow: hidden;
}
I do have a separe css file for "max device width: 480px".
however nothing works do you please know where could be a mistake ?
add this tag in the head tag
<meta name="viewport" content="width=device-width, initial-scale=1">
I had something similar:
the background image was not beeing displayed correctly on Safari & Safari mobile.
The problem is about
background-attachment: fixed
This is a bit tricky for mobile browsers.
For me I just had to leave that out.
Sometimes event the positioning is not available. So try without.
Maybe helpful for you:
Fixed background on iOS
Hope that helps.
Additional:
Also found this on Stack about that issue.
Tried to use slick banner lib this time around at the request of a client and my image seems to be collapsing inside of the div at 100% width and 500px height. I'm looking for it to re-scale # a height of 500px. Have looked around and seem to be doing as recommended?
http://www.cucoders.com/
.slick-slide img
display: block;
height: 500px;
width: 100%;
Was able to get image fully responsive by using the code below. When just using background-image: cover; the image is not fully responsive and collapses on it's self. The below css works.
.background-image-3 {
width: 100%;
height: 500px;
position: relative;
background-image: url("http://www.cucoders.com/images/background.png");
background-size: cover;
background-attachment: scroll;
background-position: 50% 0px;
overflow: hidden;
}
I have background-attachment: fixed; on my hero section and it works in firefox and safari but not in chrome. I can get it to work by changing to position:relative; and z-index: -1; but then the buttons within the hero become unusable and this also creates problems in firefox and safari.
#hero {
padding-top: 60px;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
I tried changing the parent positions to static based on other post I found but that didn't work either.
http://bayarddev.com/fca/about-us/
Ok I see it now. On .hero's parent element .off-canvas-wrap and .inner-wrap you are using -webkit-backface-visibility: hidden. If you turn this off the background attachment works fine.
I have two divs set at 100 pixels absolutely positioned on the left and right sides of the page. I have a content section margined between them. I want the images to scroll with the page as you scroll from top to bottom of the larger pages. There are seven total pages in my site of varying sizes and i am trying to use CSS to make this work. Can anyone help me?
Look at css fixed positioning.
position:fixed; top:0px; left:0px;
See here: http://limpid.nl/lab/css/fixed/left-sidebar-and-right-sidebar
Here is an example that might solve your problem.
It uses the background-attachment:fixed; but you could also use the position:fixed attibute depending on how you want to have your images static in an element or scroll with the page. The issue with the background option is it will require you to design a background image for it, but it will work.
EDIT: Here is an excellent post on fixed positioning and cross browser compatibility.
<div id="image1">
</div>
<div id="image2">
</div>
#image1 {
position: absolute;
width: 100px;
top: 0;
left: 0;
padding: 0;
margin: 0;
background-image: url(../media/warlock.jpg);
min-height: 100%;
height: 100%;
background-position: center;
background-attachment: scroll;
}
#image2 {
position: absolute;
width: 100px;
top: 0px;
right: 0px;
padding: 0;
background-image: url(../media/paladin.jpg);
min-height: 100%;
height: 100%;
background-position: center;
background-attachment: scroll;
background-repeat: repeat;
}
That is basically the code for the two side divs. They are completly void of anything but background images that I want to scroll the length of the page.