php - CSS - Transparent bg of image not rendering on website -

i'm trying redesign site original square, tile-based rendering of images can more of cutout of image... rid of grid pattern.

here's how looked originally...

here's rough mock-up of i'm going for:

so resaved image thumbnail transparent background... want dog show, , square transparent show site's background underneath.

yet when render on page, has black background.

i've checked css see if there sort of img class, or class rendered comics... or bootstrap see there may background-color being assigned black (and searched hex code 000000), didn't find one...

do know why may happening?

thanks!

---

edit: i've noticed something...

my logo @ top renders transparent background... , element png file... therefore, mime type image/png.

i'm using thumbnailing script make thumbnails smaller, element of thumber.php, puts mime type image/jpeg.

so guess it's thumbnailing script changing mime type.

so checked it, , it's creating file jpeg

//imagejpeg outputs image imagejpeg($img); 

is there way change resampled image output png?

---

thumbnailing script:

    <?php #appreciation goes digifuzz (http://www.digifuzz.net) on  $image_file = $_get['img']; //takes in full path of image $max_width = $_get['mw']; $max_height = $_get['mh']; global $img;  //check image if(!$image_file || $image_file == "") {      die("no file.");  }  //if no max width, set 1 if(!$max_width || $max_width == "") {      $max_width="100";  }  //if no max height, set 1 if(!$max_height || $max_height == "") {      $max_height = "100";  }  $img = null; //create image file 'img' parameter string $img = imagecreatefrompng($image_file);  //if image loaded... if($img) {     //get image size , scale ratio     $width = imagesx($img);     $height = imagesy($img);      //takes min value of these 2     $scale = min($max_width/$width, $max_height/$height);      //if desired new image size less original, output new image     if($scale < 1) {         $new_width = floor($scale * $width);          $new_height = floor($scale * $height);           $tmp_img = imagecreatetruecolor($new_width, $new_height);          //copy , resize old image new image         imagecopyresampled($tmp_img, $img, 0, 0, 0, 0, $new_width, $new_height, $width, $height);          imagedestroy($img);          //replace actual image new image         $img = $tmp_img;     } } //set content type header header("content-type: image/png");  //imagejpeg outputs image imagealphablending($img, false); imagesavealpha($img, true); imagepng($img);  imagedestroy($img);  ?> 

you need make changes in image generator , see if works out you. crucial changes within setting of header , method of image generation. looking these following two

header('content-type: image/jpeg'); 

change to:

header('content-type: image/png'); 

---

imagejpeg($im); 

change to:

imagepng($im) 

when dealing png images alpha channel should take few steps. before spitting out imagepng(), these lines need added.

imagealphablending($img, false); imagesavealpha($img, true); 

this information can found on php.net

edit: try these alterations code:

 if($scale < 1) {         $new_width = floor($scale * $width);          $new_height = floor($scale * $height);           $tmp_img = imagecreatetruecolor($new_width, $new_height);           imagealphablending($tmp_img,true); // add line          //copy , resize old image new image         imagecopyresampled($tmp_img, $img, 0, 0, 0, 0, $new_width, $new_height, $width, $height);          $img = $tmp_img;          // remove line here     } }  header("content-type: image/png"); imagesavealpha($img, true); imagepng($img); imagedestroy($img); imagedestroy($tmp_img); // add line here 

basically create new layers , put these together. each layer need set alpha blending. successful in creating alpha images. let me know findings .. :-) ..