transparent background of logo

Question

I've set logo for my web It file is png but browser show me the checkered board on background of my logo I want delete this checkered board

<div class="bmw"></div>

.bmw{
    max-width: 100%;
    max-height: 150%;
    height: 95px;
    width: 95px;
    border: 1px;
    background-color: transparent;
    background-size: cover;
    background-image: url(/img/324022-middle.png);
    float:right;
    margin-right: 30px;
    margin-top: 17px;
}

I've searched a lot and I did every one said but none of them didn't work for me.

I set some change but It didn't work again

<img class="bmw" src="/img/324022-middle.png" alt="bmw">

.bmw{
    max-width: 100%;
    max-height: 150%;
    height: 95px;
    width: 95px;
    border: 1px;
    background-color: transparent;
    background-size: cover;
    float:right;
    margin-right: 30px;
    margin-top: 17px;
}

I thing some thing can help me should be a transparenting with background of my site some how please help me

Answer 1

Checkerboard matrix is possibly being exported with the original logo image.

In photo imagery software (like Photoshop) transparency ON shows base checkerboard (for merely visual purposes within the software).

In image software such as Photoshop: PNG images export as a layer, the top layer being the image or logo, and the base layer being transparent or solid (depending on the settings chosen). Turning transparency settings OFF gives a PNG with a solid background tone behind the logo.

Examples of two images below:

In (img1) the PNG was exported as a transparency. Now in the CSS you can control the background color with any tone you want (color or transparent). We presume the PNG logo you're using has a transparent background (layered). If yes, just CSS background-color:#fff; should do it (or any tone you need). If that doesn't work you'll likely need to export the logo using different PNG settings.

In (img2) the outer background gray tone is a lower layer we exported with the image. Its still a PNG image. Yet neither the gray tone nor the image can be separated from each other (not with any CSS) because its all 1 layer (all one image).