1

Not sure if this is might be a Chrome bug (FF and IE work fine) since I've tried various work-arounds, especially those I found here, but to no avail: Removing the image border in Chrome/IE9

Basically I'm overlaying an image on top of another, and I've noticed that with Chrome if I scale the page to any zoom-level other than 100%, a grey image border appears around the overlay. You can see it in action here: http://jsfiddle.net/6HLzx/

EDIT: I updated the JSFiddle to include a better example of what I'm trying to accomplish. 

// css
#background { position: fixed; left: 0px; top: 0px; border: none;  border-style: none; z-index: 0; }
#overlay { position: fixed; left: 0px; top: 0px;  border: none; border-style: none;  z-index: 1;}

// html
<body>
    <div id="background">
        <img border="0" src="http://gorch.com/webstuff/background.png">
    </div>
    <div id="overlay">
        <img border="0" src="http://gorch.com/webstuff/overlay.png">
    </div>
</body>

Any ideas? Thanks in advance!

-jojohack

Community
  • 1
  • 1
joeycato
  • 118
  • 2
  • 11

1 Answers1

2

The faint line you see is caused by the browser rendering the image with an anti-alias edge. This creates a single pixel line which is half the opacity. The question now is... How can I turn off anti-aliasing on images?

If you want background.png to be a background then apply it in the css.

As an example:

#background {
  background: #333 url(https://place-hold.it/500x500);
  width: 500px;
  height: 500px;
}

#overlay {
  background: rgba(255, 0, 0, 0.5)/*partially transparent color*/;
  width: 100%;
  height: 100%;
}
<div id="background">
  <div id="overlay">

  </div>
</div>
misterManSam
  • 24,303
  • 11
  • 69
  • 89
  • I tried following your example but got the same results. Here is a better example of what I'm trying to do: http://gorch.com/webstuff/tv_example.html If you visit this link, you'll see a faint white border surrounding the overlay (if you adjust the zoom-level) Basically I need the overlay to be an image as well. – joeycato Dec 04 '13 at 07:50
  • Ha! OK, the problem is not with the HTML or CSS. The faint line you see is caused by the browser rendering the image with an anti-alias edge. This creates a single pixel line which is half the opacity. The question now is... How can I turn off anti-aliasing on images? Here are some questions I found. http://productforums.google.com/forum/#!topic/chrome/AIihdmfPNvE http://productforums.google.com/forum/#!topic/chrome/Y-L2iILE0-c – misterManSam Dec 05 '13 at 00:50
  • Thanks, Sam! That makes perfect sense now. Hadn't thought of that possibility. Gave you credit, I'd upvote you as well but apparently the site won't let me yet. – joeycato Dec 05 '13 at 01:34