There is a recent post published on the front page of our website, midstory.org, titled "Toledo’s Jazz Scene Is Roaring Once Again". When viewed on a 1008p screen, there is a thin colored line that appears on the top edge of the image, that would otherwise not be there. We're trying to determine what is causing this because it comes and goes based on the scaling of the image (you can easily replicate it by going to the homepage and sizing the browser window to see what happens). At first, I thought it was a shadow artifact that could be doing something, but I'm not sure and so far, I have been unable to isolate this subtle problem. Has anyone seen this before? What did you do to fix it?

  • I cannot reproduce the issue here, but is this a WordPress question or a general frontend styling question? Keep in mind this isn't a discussion forum so you need a fully formed question that can be answered without leaving the site, this might be better asked at stackoverflow as you need frontend/HTML/CSS/JS help
    – Tom J Nowell
    Sep 7, 2022 at 18:21
  • Thank you! Will move my post there
    – Jason O
    Sep 7, 2022 at 18:37
  • looking at it closer I can find no CSS based cause of this, it isn't a border or outline and it moves with the image, if you give the element an outline or border, the artefact appears inside
    – Tom J Nowell
    Sep 7, 2022 at 18:51
  • background-repeat:none;, it's not a mystery line or artefact, it's a tiny sliver of the bottom of the image, because you have background: cover; the image isn't big enough to fully cover the element vertically, and it's more obvious on that particular image.
    – Tom J Nowell
    Sep 7, 2022 at 18:52


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.