1

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):

enter image description here

Firefox (second circle, where the pink box has background-attachment: fixed;, is broken):

Firefox

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>
Ginchen
  • 790
  • 7
  • 20
  • It does it in the code snippet if you go to full page. It also do a lot of other crazy stuff while you resize the page. – xpy Feb 23 '16 at 10:34
  • Oh, right. In "full page", it even shows the error with the first box - the one that is usually correct even in Firefox. ;) So don't trust this preview. (Then again, maybe this is something that may point to the solution?) – Ginchen Feb 23 '16 at 12:24

0 Answers0