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.
Related
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>
I'm new to bootstrap and have tested my webpage on a few browsers.
When I make the width of the tab smaller on chrome, either from the left or right in chrome, part of the image is cropped and put on the other side of the image. The imgur picture shows the problem.
Any help or advice is appreciated!
This is the issue of bootstrap with chrome
My website page with a problem is here
I've put my css code below:
#header {
width: 100%;
min-height: 500px;
/*height: 50%;*/
background-image: url("/galleryPhotos/whiteVan2.jpeg");
margin-top: 0px;
background-size: cover;
background-position: 100%;
background-repeat: no-repeat;
top: 0px;
position: relative;
}
Try adding these to your css, it seems to work for me in your example.
-webkit-background-size: cover; //safari chrome
-moz-background-size: cover; // firefox
-o-background-size: cover; // opera
Here is a fiddle for it (different pic though): https://jsfiddle.net/46zcm0yL/
A bit of a strange one. The background image (or even when I add a color) to the header on the website, that contains the menu items will not be displayed in IE8. It seems to work on Chrome and Firefox however in IE8 it does not display. The Url is http://www.esfdev.co.uk/emmanuel/ any help will be greatly appreciated.
CSS is below.
div#header {
background-image: url("./images/headerBg.png") !important;
background-position: center bottom;
background-repeat: repeat;
height: 93px;
position: fixed;
width: 100%;
z-index: 10 !important;
}
Thanks
Here's the CSS that applies the background so that it stretches with the browser window:
html {
height: 100%;
width: 100%;
}
body {
background: url(images/skyline.jpg) no-repeat center 25% fixed;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/skyline.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/skyline.jpg', sizingMethod='scale')";
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color: #ddd;
height: 100%;
margin: 0;
width: 100%;
}
I have no problems when using FF, Chrome, Opera, or IE9, but in IE8 IE7 and IE6 (not that I should care about IE6) none of the links work.
When I disable the filter attribute the links work again. I read up that positioning the links relative might help but it didn't work and the outter element <body> isn't positioned relative anyway.
The site is http://sytko.com. The design and layout was requested to be this way by the client so it will be hard to pitch alternatives. Any help is greatly appreciated.
Per this explanation:
http://css-tricks.com/perfect-full-page-background-image/
"...anyone trying to use the above IE filters and having problems with scrollbars or dead links ... should try NOT using them on the html or body element. But instead a fixed position div with 100% width and height."
You could add a containing div just inside the body, then.
I have a Joomla site that i have created a custom theme. The site is http://esn.teipir.gr/.
I have two images right and left that i want them to have background image fixed.
I use the following CSS rules
div.backgroundboxleft {
background-attachment: fixed;
background-image: url("/images/back_1.png");
float: left;
height: 822px;
top: 40px;
width: 457px;
}
and
div.backgroundboxright {
background-attachment: fixed;
background-image: url("/images/back_2.png");
float: right;
height: 822px;
top: 40px;
width: 457px;
}
If i remove the background-attachment all is OK with the images but when i add with firebug the following code everything messes up.Can you help me making the pages stay fixed without the background color being on top of the image?
Thanks
When you set background-attachment:fixed it fixes the background in relation to the window. So you would then need to adjust the background-position of your images so they appear in the right place. If you replace your backgroundproperties with the css below it will line up properly.
div.backgroundboxleft {
background-image: url("/images/back_1.png");
background-attachment: fixed;
background-position: 0 44px;
background-repeat: no-repeat;
}
div.backgroundboxright {
background-image: url("/images/back_2.png");
background-attachment: fixed;
background-position: 1323px 44px;
background-repeat: no-repeat;
}
Live example: http://jsfiddle.net/tw16/6fZ96/embedded/result/
To clarify background-attachment:fixed stops the background from scrolling with the window. So if your viewport is too small and you have to scroll horizontally or vertically the background will not move (i.e. it will be overlapped). More information can be found here.