I have a website with a large background image. Now I want to add circle buttons/links that also have background images.
It renders fine in Chrome and IE, but Firefox shows an ugly box with the same background-color that the <body> has.
The problem seems to appear as soon as you combine background-attachment: fixed; on the outer container with border-radius on the circle button.
I suppose this is a Firefox bug. Anyone has a workaround for this?
P.S.: If I run it here via "Run code snippet", it renders correctly in Firefox! Why is that?!
Chrome/IE (both circles are correct):
Firefox (second circle, where the pink box has background-attachment: fixed;, is broken):
body {
background-color: gray;
}
#wrapper1 {
width: 100px;
height: 100px;
background-image: url("http://www.edda-hsu.net/images/ProductImages/Fabrics/BasicFabrics/smooth-velvet-magenta.jpg");
margin-bottom: 40px;
}
#wrapper2 {
width: 100px;
height: 100px;
background-image: url("http://www.edda-hsu.net/images/ProductImages/Fabrics/BasicFabrics/smooth-velvet-magenta.jpg");
background-attachment: fixed; /* PROBLEM */
}
.box {
display: block;
background-image: url("https://d2d00szk9na1qq.cloudfront.net/Product/ac6714d6-578e-42d4-b81f-aaf7a7e5d580/Images/Large_CV-174.jpg");
background-attachment: fixed;
border-radius: 50%; /* PROBLEM */
width: 50px;
height: 50px;
}<body>
<div id="wrapper1">
<div class="box"></div>
</div>
<div id="wrapper2">
<div class="box"></div>
</div>
</body>