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.
Related
I am trying to implement the following codepen for my website :
https://codepen.io/pizza3/pen/NgXowe
When opened with chrome the background images of the slices are positionned correctly and all the slices stacked on each other will display the entire image.
However when browsing with firefox (version Qunatum 60.0.1 (64-bit)) you can notice that the background images are not positionned the same. Seems to me it has to do with the origin point of the images or something similar but I can't figure what the problem is.
I believe the relevant part of the problem is here :
.left,
.right {
position: relative;
width: 50vw;
height: 20vh;
background-attachment: fixed;
background-size: cover;
overflow: hidden;
}
Is this a firefox bug ?
In other words how can I have the same background image spread accross multiple DIVs ?
How can I solve this ?
Thanks
EDIT
Here a couple screenshots to illustrate the problem:
Chrome :
Firefox :
It looks that, though counter-intuitive, the behavior of Firefox(and Edge) is intended and correct as per spec: the transform property (used by the GSAP library for animation) makes background-attachment: fixed behave as scroll. So I'd suggest removing background-attachment: fixed and replacing it with different background-position values for each slice of the image.
May be this answer would also be relevant: https://stackoverflow.com/a/43067630/2533215
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;
}
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.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
background-size in shorthand background property (CSS3)
<!DOCTYPE html>
<meta charset="utf-8">
<title>An HTML5 Document</title>
<style>
div {
width: 500px;
height: 400px;
background: red url(https://www.google.com/images/logos/google_logo_41.png) 50% 50% cover no-repeat;
}
</style>
<div></div>
http://jsfiddle.net/gu9fh
I wanna define a CSS background-size property with value cover. But I don't tend to write a single background-size property. I wanna combine it to the background property. But the background doesn't be displayed.
How can I add a CSS background-size value cover to the background property's value?
Thanks.
Also what hasn't been noted yet is that not all browsers (including Chrome) supports the new CSS3 shorthand for background.
For better support you probably should just use the background-size property separately as most new browsers support it that way.
div {
width: 500px;
height: 400px;
background: red url(https://www.google.com/images/logos/google_logo_41.png) no-repeat scroll 50% 50%;
background-size: cover;
}
The code above works in both FireFox and Chrome while the shorthand does not.
For a demo and proper attribute ordering see the link below.
See Dev - Opera - Background Shorthand
When using the shorthand property, the background-size value must be paired with background-position and separated by a /
Updated: http://jsfiddle.net/5jJfQ/
See the documentation here: http://www.w3.org/TR/2002/WD-css3-background-20020802/#properties7
The order of the arguments for background was off. repeat should go before position. Then as jrrdnx noted, size and position should be separated by a /
background: red url(https://www.google.com/images/logos/google_logo_41.png) no-repeat 50% 50%/cover;
See: http://jsfiddle.net/gu9fh/5/
And a good reference: http://reference.sitepoint.com/css/background
EDIT: As PJH noted, the shorthand for position/size is not yet supported in Firefox or Safari. You simply need to set the background-size on it's own.
background: red url(https://www.google.com/images/logos/google_logo_41.png) no-repeat 50% 50%;
background-size: cover;
And updated fiddle: http://jsfiddle.net/gu9fh/6/
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;
}