CSS - Transparent bg of image not rendering on website

Question

I'm trying to redesign my site so that my original square, tile-based rendering of images can be more of a cutout of the image... to get rid of that grid pattern.

Here's how it looked originally...

Here's a rough mock-up of what I'm going for:

So I resaved an image thumbnail with a transparent background... I just want the dog to show, and the square is transparent which will show the site's background underneath.

Yet when I render it on the page, it has this black background.

I've checked my CSS to see if there is some sort of img class, or class for the rendered comics... or even the bootstrap to see where there may be a background-color being assigned to black (and also searched for hex code 000000), but didn't find one...

Do you know why this may be happening?

Thanks!

---

EDIT: I've just noticed something...

My logo at the top renders with a transparent background... and the element is a png file... therefore, its MIME type is image/png.

I'm using a thumbnailing script to make the thumbnails smaller, but now the element is of thumber.php, which puts it as MIME type image/jpeg.

So I guess it's my thumbnailing script that changing the MIME type.

So I checked it, and it's creating the file as a jpeg

//imagejpeg outputs the image
imagejpeg($img);

Is there a way to change it so that the resampled image is output as a png?

---

Thumbnailing script:

    <?php
#Appreciation goes to digifuzz (http://www.digifuzz.net) for help on this

$image_file = $_GET['img']; //takes in full path of image
$MAX_WIDTH = $_GET['mw'];
$MAX_HEIGHT = $_GET['mh'];
global $img;

//Check for image
if(!$image_file || $image_file == "") { 
    die("NO FILE."); 
}

//If no max width, set one
if(!$MAX_WIDTH || $MAX_WIDTH == "") { 
    $MAX_WIDTH="100"; 
}

//if no max height, set one
if(!$MAX_HEIGHT || $MAX_HEIGHT == "") { 
    $MAX_HEIGHT = "100"; 
}

$img = null;
//create image file from 'img' parameter string
$img = imagecreatefrompng($image_file);

//if image successfully loaded...
if($img) {
    //get image size and scale ratio
    $width = imagesx($img);
    $height = imagesy($img);

    //takes min value of these two
    $scale = min($MAX_WIDTH/$width, $MAX_HEIGHT/$height);

    //if desired new image size is less than 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 and resize old image to new image
        imagecopyresampled($tmp_img, $img, 0, 0, 0, 0, $new_width, $new_height, $width, $height);

        imagedestroy($img);

        //replace actual image with new image
        $img = $tmp_img;
    }
}
//set the content type header
header("Content-type: image/png");

//imagejpeg outputs the image
imagealphablending($img, false);
imagesavealpha($img, true);
imagepng($img);

imagedestroy($img);

?>

Answer 1

You will need to make some changes in the image generator and see if that works out for you. The crucial changes are within the setting of the header and the method of image generation. You will be looking for these following two

header('Content-Type: image/jpeg');

change to:

header('Content-Type: image/png');

---

imagejpeg($im);

change to:

imagepng($im)

When dealing with png images with an alpha channel you should take a few extra steps. Before spitting it out with imagepng(), these lines will need to be added.

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

This information can be found on php.net

Edit: Try with these alterations to this 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 this line

        //copy and resize old image to 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 this line here

Basically you create new layers and put these together. For each layer you will need to set the alpha blending. I was successful in creating alpha images. Let me know what your findings are .. :-) ..