Photoshop Question posted in
The official user guide can be found here.

1px glitch appearing below image when browser re-sizes background image – Photoshop

This is a bit of an odd one and may either be a browser glitch or something wrong with the image when saved out in Photoshop but I thought I’d ask anyway. When re-sizing a background image that is set to background-size: cover; an odd 1px line seems to appear at the base of the image. It become quite noticeable on the website as the background colour is black. It’s not one colour which makes me wonder if it is browser glitch, see below:

See weird 1px glitch under image

I have tried multiple images and I think it can be seen in Chrome and Safari. The glitch can definitely be replicated on this jsfiddle in Chrome (you’ll need to rescale the browser window and it needs to be quite large to see it).

Tags:

2

Answers


  1. 0

    I believe this an issue between background-position: bottom and background-size: cover. I have noticed that if we remove background-position: bottom there is no glitch. Probably an issue with Webkit browsers even though I haven’t found a bug report for this.

    You can solve this issue by using background-position: 50% 99% until the bug is fixed. If someone has a better answer I’ll be interested to know :).

    body{
  background: #000;
}

.hero{
  background-image: url('http://i.imgur.com/R7WAday.jpg');
  height: 250px;
  width: 100%;
  background-size: cover;
  background-position: 50% 99%;
}
    <div class="hero">
</div>
    Login or Signup to reply.
  2. 0

    I’ve just had this problem, found little about it online, and found this post.

    I found this post from 2009(!) where the author suggests using:

      .hero {
        background-position: 49.999% 0;
    }

    or

      .hero {
        background-position: 50.001% 0;
    }

    They had varied success for me in my situation. I ended up mostly using:

      .hero {
        background-position:bottom -1px left 0;
    }

    As my designs allowed me to reduce the size by -1px, and this got rid of the issue.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search