StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POCSS - Transparent bg of image not rendering on website
text
Body
copied!<p>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.</p> <p>Here's how it looked originally...</p> <p><img src="https://i.stack.imgur.com/A6HzJ.jpg" alt="enter image description here"></p> <p>Here's a rough mock-up of what I'm going for:</p> <p><img src="https://i.stack.imgur.com/9nJ7A.jpg" alt="enter image description here"></p> <p>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.</p> <p><img src="https://i.stack.imgur.com/GGVjZ.jpg" alt="enter image description here"></p> <p>Yet when I render it on the page, it has this black background.</p> <p><img src="https://i.stack.imgur.com/7sOSx.jpg" alt="enter image description here"></p> <p>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...</p> <p>Do you know why this may be happening?</p> <p>Thanks!</p> <hr> <p><strong>EDIT:</strong> I've just noticed something...</p> <p>My logo at the top renders with a transparent background... and the element is a png file... therefore, its MIME type is image/png.</p> <p>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. </p> <p><img src="https://i.stack.imgur.com/mOlgw.png" alt="enter image description here"></p> <p>So I guess it's my thumbnailing script that changing the MIME type.</p> <p>So I checked it, and it's creating the file as a jpeg</p> <pre><code>//imagejpeg outputs the image imagejpeg($img); </code></pre> <p>Is there a way to change it so that the resampled image is output as a png?</p> <hr> <p>Thumbnailing script:</p> <pre><code> <?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); ?> </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload