0

I'm creating my website and I want to add a log on the navbar.

index.html:

<header>
  <div class="header_logo">
    <img class="logo" value="logo"/>
  </div>
  <div>

  </div>
</header>

style.css:

  .logo
  {
   background-image: url("../icons/car.png");
   border-style: none;
   position: absolute;
   left: 38px;
   top: 19px;
   width: 137px;
   height: 49px;
  }
  .header_logo 
  {
   background-color: #000000;
   position: absolute;
   left: 0px;
   top: 0px;
   width: 100%;
   height: 75px;
  }

the logo is: car.png

But when I test the website it works well on Explorer and Firefox but on Chrome I got a white contour surrounded the logo and the background of the navbar is black. How can I fix that?

xhunter
  • 49
  • 7

1 Answers1

0

Looking at the PNG file. it looks like it has a white border around it. replace the image with one without a white border and you will be good.

use this file instead Car.png

EDIT: After looking at it, it looks to be an issue with how Chrome works with the img tag. just use a div tag for it. for example the HTML:

<header>
    <div class="header_logo">
        <div class="logo" value="logo"></div>
    </div>
    <div>

    </div>
</header>

And for the CSS:

.logo {
    background-image: url("../icons/car.png");
    border-style: none;
    position: absolute;
    left: 38px;
    top: 19px;
    width: 137px;
    height: 49px;
}
.header_logo {
    background-color: #000000;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 75px;
}

https://codepen.io/anon/pen/QpJbwy

If you need to use an img tag, you must have a src attribute.

Joshua Pack
  • 910
  • 1
  • 9
  • 21
  • But why in explorer and firefox the white border doesn't appear? – xhunter Mar 29 '17 at 15:39
  • It is the way transparency PNG is handled by chrome i believe. If you need it to be transparent, you will need to encode it correctly for chrome. I am unsure of the technicality of it. – Joshua Pack Mar 29 '17 at 15:39
  • I tried the photo that you edited but I got the same thing as before :/ – xhunter Mar 29 '17 at 15:46
  • @xhunter oh wow, that is surprising. Let me draw up a codepen to take a look – Joshua Pack Mar 29 '17 at 15:56
  • @xhunter ok, i made edits, it is very strange that this happens, but it looks like chrome wants a `src` attribute for `img` tags, so use a `div` tag to work around it. or give it a `src` attribute. – Joshua Pack Mar 29 '17 at 16:12