I tried google for help on this and it seems to be a bug in chrome but I still can't find a solution. I have taken a look at many stackoverflow questions similar to this but those solutions still didn't help.
When I try to scroll down on the page the background-image flickers and messes up.
I am using Google Chrome Version 35.0.1916.153 on Ubuntu Desktop
CSS code:
#left-container {
background-image: url('http://easource.com/wp-content/uploads/2014/07/traphouse4.jpg');
background-attachment: fixed;
background-position: -1% 0%;
background-repeat: repeat-y;
cursor: pointer;
}
You can see how it looks on http://easource.com
Also, I tried removing the background-position but still doesn't work.
As seen here: Fixed attachment background image flicker/disappear in chrome when coupled with a css transform
Try to change to position:static only.
You can keep your position as is and add the transform property to your background image element.
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
Removing overflow-y: scroll;
from body solved the issue for me.
Try adding backface-visibility: hidden;. Worked for me.
It's working fine with using position:static;
if it doesn't work, remove the position property.
You must have to use these properties to make the image fixed:
background-image: URL("your image path");
and I'm 100% sure that it will work for you in every browser.
Related
I just wanted to post a quick question concerning any parallax background image that has dissapeared upon the new version 67 chrome update.
Currently there are two fixes that I have found online that work.
Are there any others that may work better, and can anyone let me know why the new version of chrome 67 is making background fixed images disappear?
You can add the following transform properties below to your element that contains a background image with fixed attachment. reference(1)
yourdiv {
position:relative;
background-image:url(your_image);
background-size:cover;
background-position:center;
background-attachment:fixed;
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
OR you can change the position to static of the element with the background fixed image. reference(2)
yourdiv {
position:static;
background-image:url(your_image);
background-size:cover;
background-position:center;
background-attachment:fixed;
}
Hope this helps for now and thank you in advance for any answers posted.
add style
will-change: transform;
background-attachment: fixed;
CSS value transform turn off background-attachment: fixed in Firefox.
Here is the example
div {
transform: translate3d(0,0,0); // if remove starts to work
width: 100%;
height: 2000px;
background-image: url('http://www.wallpapereast.com/static/images/001_Fish-Wallpaper-HD_hkNsK33.jpg');
background-size: cover;
background-attachment: fixed;
}
<div></div>
if you remove transform from CSS it starts to work. Reproducible only in FF.
background-attachment:fixed; doesn't work when any 'transform' is
applied
and that's a bug in firefox and it is not yet fixed.
Reference: https://bugzilla.mozilla.org/show_bug.cgi?id=1292499
It was a common problem 2 years ago, but as far as I know, it has been solved a while ago, and now the background-attachment CSS Property is now fully supported by all browsers, according to MDN.
According to MDN docs when it comes to animations most background properties are discrete. Except for the background-size and background-position properties.
This has been solved in this question.
Long story short- use position instead of background-attachment.
my css looks like this:
body {
background: url(images/Gabrielheroimage3.jpg);
background-repeat: no-repeat;
background-size: contain;
max-height: 700px;
max-width: 1300px;
}
tried removing max-height and width but didn't help. also tried background-image rather than background and that didn't help either. I appreciate any suggestions! Thank you!
background-image: url(images/Gabrielheroimage3.jpg);
the page having a problem was literally just a background image with navigation. Took the background image out of the css file and add div img tag and styled it within html and it worked on IE and all the other browsers for that matter.
I have the very simple task of applying a background image to a DIV. I can view the image with every other browser except Safari. Can someone take a look at my CSS and site and tell me what I'm doing wrong.
CSS:
#intro2services {
background:linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0)), url(../img/colorpencils.jpg) fixed;
background-position: 100% 100%;
background-size: cover;
background-repeat: no-repeat;
}
Site:
www.designedbysheldon.com
I played around with your site for a few minutes, and I suggest breaking up your styles for the background rather than condensing some while having others declared on their own. Change your CSS to:
#intro2services {
background-position: 100% 100%;
background-size: cover;
background-repeat: no-repeat;
background-image: -moz-linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0)),url('../img/colorpencils.jpg'); /* Firefox-specific background styles */
background-image: linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0)), url('../img/colorpencils.jpg');
background-attachment: fixed;
}
That removed the repeat, applied the gradient, and applied the cover sizing correctly. This is tested and working in Chrome and Safari. Firefox only works when the -moz vendor prefix is added. You can add the other vendor prefixes to be safe, but gradients are implemented in the other major browsers at this point.
This is a know issue with Safari. Most of the time, adding a negative z-index to your style, will solve the issue.
z-index:-1:
Apparently Safari--or at least some versions of it--refuses to apply CSS to form fields, so if you have a clever little search box like I do, Safari won't render any CSS applied to it. I thought it was specific to my use of SVGs and then I thought it had something to do with the short code. I was stuck until I found an obscure post on GitHub from a MarcHaunschild from 2011 discussing this behavior. Anyway in the case that you're trying to style a field such as a search box, here's the fix.
Add the following to your CSS:
input[type="search"] {
-webkit-appearance: textfield;
}
Ok so I have set a background-position property on an element through a class declaration. And for some reason chrome, and I'm assuming all webkit browsers, ignore the background-position property.
I have like so
.buttonholder {
background-position: -175px 0px;
}
and
<span class='buttonholder'>
<a href='index.php'>Home</a>
</span>
I took out the firebug type tool in chrome and for some reason the tag comes up like so:
<span class='buttonholder' style='background-position: 0% 0%; '>
Even though there is no specific style declaration inside the elements tag. Any advice would be greatly appreciated
Edit: Apparently people think I am trying to use this as a way to position the element. Which is false. I'm trying to position a background image.
Add this:
background-position-x: -175px;
background-position-y: 0px;
Also see:
http://code.google.com/p/chromium/issues/detail?id=57963
In chrome, to solve this bug, you need to use percent in background position.
When change position will works fine.
Hope its help
Incidentally, I had a similar issue to this, where I use JavaScript to dynamically reposition an element using the jquery('[element]').css('background-position') property and it wasn't showing up in Chrome.
I found that I had also had the element declared in the CSS in an external stylesheet:
[element] {
background: #becfd3 url([background image]) no-repeat 140px 60px;
}
I ended up removing the 140px 60px part of the element in the stylesheet and it worked for me. Maybe it'll work for you?
If you wanna positionate something check for position: absolute | relative | fixed | static, and add top, and left according to w3c standard. I have no idea of background-position, but I'm pretty sure that what you do with this property can also be handle with my opinion.
The background-position property is used to position background images only, not the elements themselves. If you'd like to learn CSS positioning in ten steps, see http://www.barelyfitz.com/screencast/html-training/css/positioning/
Reference for background-position: https://developer.mozilla.org/en/CSS/background-position (info applies to Mozilla and Webkit)
I was playing around with this and found chrome and other webkit browsers to render background positions without any issues. I used a single background declaration like this:
background: url(http://www.example.com/image.png) -175px 0;
Perhaps you could declare the style in the same way and see if that works.
This one almost works for me. It positions the element to the right side, but it doesn´t take the .3rem into consideration in Chrome browser.
The background-position-y works in Chrome as well.
#email.active {
background-image: url(./images/icon-error.svg);
background-repeat: no-repeat;
background-position-x: right, .3rem !important;
background-position-y: center;
}
In Safari it has worked in the following way for me, I didn´t have any issues with the positioning in Safari.
#email.active {
background-image: url(./images/icon-error.svg);
background-repeat: no-repeat;
background-position-x: right .3rem !important;
background-position-y: center;
}