CSS background-color on edges

Question

I have a transparent .png image and I change the background color with css so i can use the same image with different colors.

This is a dummy image and the problem is with Chrome browser i get a line on top and bottom of that image when you zoom at certain points and on some smartphones like this:

It depends on page resolution I think. This problem is not reproducable with Firefox whatsoever.

Has anyone seen something like this? How can this be solved?
Here is an example, and try to zoom in with Chrome or open it with smartphone:

.vertical-center {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  background-color: black;
  background-clip: padding-box;
  background-clip: content-box;
}
/* CSS used here will be applied after bootstrap.css */ .equal-col-height { display: flex; display: -webkit-flex; flex-wrap: wrap; }

<div class="panel-heading">Heading</div>
<div class="panel-body">
  <div class="row equal-col-height">
    <div class="col-xs-6 text-center">
      <img class="vertical-center" src="https://s21.postimg.org/6hym65mtj/test.png">
    </div>
  </div>
</div>

update

The whole problem was actually seeing the background color on edges of the element like here Fiddle link you can reproduce it by opening the link on smartphone and try to zoom in. The background-color comes through the edges.

And the solution from Kosh Very solves the problem

Demo on fiddle

This is caused by non-accurate calculations in Chrome itself. And I think there is nothing you can do about it. When you add a white border, you'll get even more lines — lumio, Jun 26 '17 at 14:41
True...so there is no help to this? Is there another way around this to use a single image and change the color of it with css? — lewis4u, Jun 26 '17 at 14:42
Maybe that's the black background peeking through? If so, you could try wrapping the image (for example in a `figure`), apply the background color to that element, then apply `overflow:hidden`? Not sure, just tossing ideas. — domsson, Jun 26 '17 at 14:44
If `overflow:hidden` does not work: Have you thought of SVG clipping masks? — lumio, Jun 26 '17 at 14:48

Kosh · Accepted Answer · 2017-06-27T17:59:13.650

The problem is not caused by image itself, but by wrong subpixel rendering in some browsers.

The following code does the trick with the image in my Chrome 58.0.3029.110 (64-bit):

.vertical-center {
    position: relative;
    top: 50%;
    transform: translate3d(-1px,-50%,0);
    background-color: black;
    background-clip: content-box;
    display: block;
    border: solid 0.1px transparent;
}

/* CSS used here will be applied after bootstrap.css */ .equal-col-height { display: flex; display: -webkit-flex; flex-wrap: wrap; }

<div class="panel-heading">Heading</div>
<div class="panel-body">
  <div class="row equal-col-height">
    <div class="col-xs-6 text-center">
      <img class="vertical-center" src="https://s21.postimg.org/6hym65mtj/test.png">
    </div>
  </div>
</div>

Another part of the question was solving the similar problem with https://jsfiddle.net/5maqwgjg/2/ in SGS7 default browser (aka Samsung Internet). It can be solved adding background-clip:content-box; transform:scale(1.01); to .middle (https://jsfiddle.net/aw53wcg4/1/)

score 0 · Answer 2 · answered Jun 26 '17 at 17:15

0

Images automatically have vertical-align: middle and that creates the gaps on the edges.

You can make the image a block element to remove the space with display: block. They are by default inline-block.

If you don't want the image to be a block element, add vertical-align: top or vertical-align: bottom to the image element with CSS.

Here is a reference to another SO question, but the accepted answer isn't a perfect solution. Read the others for more ideas. Remove white space below image

answered Jun 26 '17 at 17:15

Jacob Birkett

1,927
3
24
49

Doesn't work please check this example with your smartphone: https://jsfiddle.net/5maqwgjg/2/ The background-color from css is visible on the edges – lewis4u Jun 27 '17 at 10:13
It works for me, what browser and Android version are you using? – Jacob Birkett Jun 27 '17 at 14:17
SGS7 default browser....but the user Kosh Very has solved it....the trick was to scale the image to cover the edges so the background color can't come to surface – lewis4u Jun 27 '17 at 17:59

CSS background-color on edges

update

2 Answers2