Thin line of colour along edge of front page headline image

  • Adam

    (@ahardy42)


    3 years ago

    Help! I’ve got a great graphic for my website and I’ve put it up on my home page as the Featured Image with the page attribute Full Width Template set.

    There is a thin line of background color along the top of the image, which is very disruptive because the graphic starts at the top with the header color, so the page header color and the graphic should merge seamlessly.

    Is there any magic CSS I can add to fix it?

    Happens on:

    – Chrome and Firefox on Linux
    – Android Firefox in landscape only
    – iPad Firefox (very thin) but not in Safari

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • Anonymous User 14254218

    (@anonymized-14254218)

    3 years ago

    Did you fix the issue already?
    cannot reproduce on:
    – Chromium, Firefox, Webkit on Linux
    – Firefox, Brave on Android (neither landscape nor portrait)

    Thread Starter Adam

    (@ahardy42)

    3 years ago

    No, not fixed. They are absolutely still there. Well, glad you don’t see them because it’s a live website but weird – why do I see it?

    It is really thin. Like there’s 0.5px border or something. Could you be overlooking it?

    When can I post screenshots online for you to view?

    Thread Starter Adam

    (@ahardy42)

    3 years ago

    Discovered that the thin line disappears if I reduce the window size small enough. I’ve got it open on Chromium in full screen and the graphic has a width of 2545.

    If I reduce it to 1300, the line is razor thin.

    At 800 wide, it’s gone.

    By the way, a line is also visible at the bottom of the image – but it’s the header background color.

    Michael

    (@alchymyth)

    3 years ago

    the line is part of you image.

    use a graphic edit program and zoom in into the edge of the image – you will see it…

    Anonymous User 14254218

    (@anonymized-14254218)

    3 years ago

    nvm,
    i thought you were talking about the logo.
    The header image has the line on top and also the image color differs from your background.

    • This reply was modified 3 years ago by Anonymous User 14254218.
    • This reply was modified 3 years ago by Anonymous User 14254218.
    • This reply was modified 3 years ago by Anonymous User 14254218.
    Thread Starter Adam

    (@ahardy42)

    3 years ago

    No sorry, for the misunderstanding. I am talking about the Featured Image.

    I don’t know how you guys established that the image contains the line. Just to double check, I opened it up in an editor and zoomed in right down to the pixel level so I could see the pixels along the top edge, and they are all grey. There is no top line of blue-green pixels in the image.

    Here is the image URL:

    https://carbonwatchdog.org/wp-content/uploads/3baysv9-grey.png

    Please double check your findings. If you still mean that the line is in the image, then please explain how it appears in the browser but not GIMP – maybe an artifact of .png format? I have no knowledge of the technical details there.

    Thanks.

    Anonymous User 14254218

    (@anonymized-14254218)

    3 years ago

    add this to your additional css and you will see the line turning pink. I did my homework 😉

    
.featured-media-inner {
  background-color:#f0f;
  outline: 10px solid #fff;
}

    This indicates that the image does not fully cover the canvas and/or the outer pixels are slightly transparent which allows the background to bleed through. This is most likely a result of the image borders not beeing properly set or due to down-/upscaling during the export. make sure to export graphics in native resolutions and add some bleeding (meaning your graphics should not end at the exact pixel where your canvas ends – this is commonly used in print media).

    Thread Starter Adam

    (@ahardy42)

    3 years ago

    I shall be educating my graphic designer! This is great, actually, assuming she appreciates the feedback because she’s being doing this pro bono.

    Meanwhile I set the background color to #ededed and the line at the top disappears.

    Thanks v. much for sorting this out!

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Thin line of colour along edge of front page headline image’ is closed to new replies.

Tags