2

I am trying to create an effect using two linear gradients as background images.

Each background image should exactly cover one half of the area. When the area has an uneven pixel width it introduces a 1px gap between the two background images. I assume that is some sort of rounding error.

It works fine in Firefox.

Here is an example: https://codepen.io/jakobfuchs/pen/qjJrwj/

.box--gradient {
   height: 80vh;
   width: 601px; 
   background-color: #fff;
   background-repeat: no-repeat;
   background-size: 50% 100%;
   background-position: 0 0, 100% 0;
   background-image: 
     linear-gradient(45deg, #000, #666),
     linear-gradient(-45deg, #000, #666)
   ;
}

Any ideas how to fix that?

Jakob Fuchs
  • 386
  • 2
  • 4
  • 12
  • Just want to note that the gap isn't resolved for any even number. If you input 60px for example, there is a gap still. – Dana Jul 12 '17 at 00:28
  • @Dana Setting it to an even number seems to fix the problem for me, I tried it at 60px – Jakob Fuchs Jul 12 '17 at 00:32
  • Your box width is `601px` and if you take half of that then you get `300.5px`. That's where the issue comes from. the issue disappears if you use an even number for the box width like `600px` or by manually setting the `background-size:` to `300.5px 100%`. Even though the spec suggests pixel fractions are fine and well supported (i.e. 0.5px) **Read**: [CSS length units](https://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#length-units) – I haz kode Jul 12 '17 at 01:26

0 Answers0