Transparent image has lines

  • Site in question: argosonscoffee.com

    I have created a transparent image with text saying “ARGO SONS COFFEE” using the font I prefer for the header on my wordpress. This is a png file. It is completely transparent around the text in photoshop. The image location is here.

    Now, this could be an image issue, but I think the problem happens in wordpress.

    How can I remove the black lines above and below the image?

    Thanks,
    Adam

Viewing 7 replies - 1 through 7 (of 7 total)

  • Edit your style.css (line 365) and change the ‘#branding img’ style rule to:

    #branding img {
  border-bottom: 0 solid #000000;
  border-top: 0 solid #000000;
  clear: both;
  display: block;
}
    Phil

    (@owendevelopment)

    All you need to do is remove the 2 border lines so that:

    #brading img {
    clear: both;
    display: block;
}

    I just viewed your site and removing the border-top and border-bottom styles removed your logo borders.

    Actually, the borders around your image are acting as spacers (4px on the top, and 1px on the bottom.

    It doesn’t make a big difference just taking them out but you can leave them exactly as they are and make the bg color of the border transparent just like your image:

    #branding img {
  border-bottom: 1px solid transparent;
  border-top: 4px solid transparent;
  clear: both;
  display: block;
}

    ??

    Phil

    (@owendevelopment)

    Or make your logo higher by 5px!

    =)

    Thread Starter adamargo

    (@adamargo)

    Thank you both. Now I just gotta figure out how to sell coffee!

    Phil

    (@owendevelopment)

    ??

    Hello All, I used this post to explain how to removed the lines around my logo. However, it’s not working. My theme is 2010, because I messed up my 2011 function.php (I wasn’t working from a child theme). Anyway. Do yo have any ideas?

    website: https://www.alleseinnovation.com
    current coding in style.css:

    /* This is the custom header image */
    #branding img {
    border-bottom: 0 solid transparent;
    border-top: 0 solid transparent;
    clear: both;
    display: block;
    }

    Where do I go from here? I’m only 1 week into WP / web stuff, so your help would be very nice!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Transparent image has lines’ is closed to new replies.