CODEWITHSUNDEEP
htmlcss
lewis4u
lewis4u

Reputation: 15057

CSS background-color on edges

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:

enter image description here

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

Upvotes: 7

Views: 3735

Answers (2)

Kosh
Kosh

Reputation: 18444

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

Upvotes: 5

Jacob Birkett
Jacob Birkett

Reputation: 2135

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

Upvotes: 0

Related Questions