Jump to content

how to make image background transparent

Recommended Posts


under backend
there you declare the size of your pics
upload it in the correct size
to get ride of the white
try a bit
can´t remember that someone found a solution to make it transparent
thats how i have it and i upload them 600x450
small 45 px 30 px Ändern Löschen
2 medium 80 px 60 px Ändern Löschen
3 large 300 px 225 px Ändern Löschen
4 thickbox 600 px 450 px Ändern Löschen
5 category 200 px 150 px Ändern Löschen
6 home 129 px 94 px Ändern Löschen
7 large_scene 300 px 200 px Ändern Löschen
8 thumb_scene 161 px 58 px Ändern Löschen

Link to comment
Share on other sites

its not the size that's the problem. I'm setting up a clothing store for my [spam-filter]. but the T Shirt images are transparent and shows white background instead of transparent.

i cant find the white background in the css. maybe it can be replast with a transparent gif file in the css.

the white part must com from somwhere

Link to comment
Share on other sites


Well .jpg's can't have transparent backgrounds and the Prestashop solution generates .jpg's, to get it to have a transparent background you would have to change the product image generation file (I don't know which one does this for the moment) by changing where it is written .jpg to .gif or .png (these 2 formats support transparent backgrounds).

If you change the .css to transparent it'll do nothing as the images are .jpg's (they don't support transparency).



Link to comment
Share on other sites

  • 1 month later...

everything is going on in images.inc.php

in the function imageResize, a white canvas is generated and the image is placed in this canvas.

   $white = imagecolorallocate($destImage, 255, 255, 255);
   imagefill($destImage, 0, 0, $white);

You have two choices: fill the canvas with a color that matches your pages' background or make a transparent canvas:

//Make a transparent canvas
$trans = imagecolorresolve($destImage,255,255,255);
imagecolortransparent($destImage, $trans);
imagealphablending($destImage, false);

In the latter case, the image would have to be saved as a png or gif.

  • Like 1
Link to comment
Share on other sites

  • 7 months later...

Which in the below would need changing if I needed it to be 255, 0 , 0 red?

               /* Allow to keep nice look even if resized */
               $white = imagecolorallocate($newImage, 255, 255, 255);
               imagefill($newImage, 0, 0, $white);
               imagecopyresampled($newImage, $imageGd, 0, 0, 0, 0, $ratioX, $size, $x, $y);
               imagecolortransparent($newImage, $white);

Managed to do it...

   $white = imagecolorallocate($destImage, 255, 0, 0);
   imagefill($destImage, 0, 0, $white);

  • Like 1
Link to comment
Share on other sites

  • 3 months later...

I am still trying to enable transparency. I see the following code in images.inc.php, but could you please advise? What needs to be edited?

$white = imagecolorallocate($destImage, 255, 255, 255);
   imagefill($destImage, 0, 0, $white);

   imagecopyresampled($destImage, $sourceImage, $borderWidth, $borderHeight, 0, 0, $nextWidth, $nextHeight, $sourceWidth, $sourceHeight);
   imagecolortransparent($destImage, $white);
   return (returnDestImage($fileType, $destImage, $destFile));

How does Henri's second piece of code fit into this? I'd like to have a PNG with a truly transparent canvas, not a JPG with a color that blends in. This is for Prestashop 1.3.1. Thank you very much.

Link to comment
Share on other sites

  • 10 months later...
  • 4 months later...


Simplest solution is:

In Back Office separator_breadcrum.pngPreferences separator_breadcrum.png Images



Image quality


x Use PNG only if the base image is in PNG format

Use PNG for all images


With some program like Photoshop,Photopaint,ACDsee or other Convert Your product picture from

*.jpg to *.png



in Back Office separator_breadcrum.png Catalog

Current product

2. Images

Browse and import this *.png file as usual


Then transparency work well!


Link to comment
Share on other sites

  • 1 month later...

I made some, but by my opinion, non system solution to avoid transparency and background color problem. (PS


My solution is: new imageResize(...) function and changes in *.tpl and *.css files


To save original I rename imageResize(...) function in images.inc.php.

Then I create following imageResize(...) function

* Proportionaly shrink and optimize image
* @param array   $sourceFile image object from $_FILE
* @param string  $destFile Destination filename
* @param integer $mW maximum Destination image width (if $sW > $sH)
* @param integer $mH maximum Destination image height (if $sW <= $sH)
* @param string  $fileType (gif, png, jpg)
* @return boolean Operation result
function imageResize($sourceFile, $destFile, $mW = NULL, $mH = NULL, $fileType = 'jpg')
 if (!file_exists($sourceFile)) { return false; }
 /* read information from $sourceFile to variables for source file */
 list($sW, $sH, $type, $attr) = getimagesize($sourceFile);
 if (!$sW) { return false; }  // $sW = 0
 if ($type < 1 or $type > 3) { return false; }  // no one of (1-gif, 2-png, 3-jpg)

 if ($mW == NULL) { $mW = $sW; }
 if ($mH == NULL) { $mH = $sH; }
 // If PS_IMAGE_QUALITY is activated, the generated image will be a PNG with .jpg as a file extension.
 // This allow for higher quality and for transparency. JPG source files will also benefit from a higher quality
 // because JPG reencoding by GD, even with max quality setting, degrades the image.
 if (Configuration::get('PS_IMAGE_QUALITY') == 'png_all' ||
 (Configuration::get('PS_IMAGE_QUALITY') == 'png' && $type == IMAGETYPE_PNG))
 { $fileType = 'png'; }

// ------------ set destination image dimmensions $dW, $dH ------------------------
 // $sW, $sH - source image dimmensions, sW-sourcewidth, sH-sourceHeight
 // $dW, $dH - destination image dimmensions, dW-destinationwidth, dH-destinationHeight
 // $mW, $mH - maximum destination image dimmensions, mW-maximumwidth, mH-maximumHeight

 switch (true):
 case ($sW <= $mW and $sH <= $mH): // if both Source dimmensions are smaller then Maximum dimmensions
$dW = $sW;  $dH = $sH;  break;  // Destination dimmensions = Source dimmensions

 // here some Source image dimmension is bigger then relevant Maximum image dimmension
 // i.e. ($sW > $mW or $sH > $mH)  
 case ($sH > $sW):  $dH = $mH;  $dW = (int)(($mH * $sW) / $sH);  break;  // adjust destination width
 case ($sH <= $sW): $dW = $mW;  $dH = (int)(($mW * $sH) / $sW);  break;  // adjust destination height
return false;  break;
// ------------ end of set destination image dimmensions $dW, $dH -------------------

 $sourceImage = createSrcImage($type, $sourceFile);  // gif, png or jpg
 $destImage = imagecreatetruecolor($dW, $dH);		// define $destImage
 imagecopyresampled($destImage, $sourceImage, 0, 0, 0, 0, $dW, $dH, $sW, $sH);
 // create image file with quality set in BackOffice or default quality 7-png, 90-jpg
 return (returnDestImage($fileType, $destImage, $destFile));

You can test this function - in BackOffice add some images for your products.

PrestaShop *.tpl files will display all images like square (depend on BackOffice Image settings), therefore new added images will look mostly broader.


Because now new added images are not squares, and I want to save previous pages look and behavior, I must change all *.tpl and *.css files which display these images. (I needed to change circa 7 tpl and css files)


Here is example how to do it for e.g. Featured Product block:


copy modules/homefeatured directory to themes/yourtheme/modules/homefeatured dir.

delete themes/yourtheme/modules/homefeatured/homefeatured.php

now You can edit themes/yourtheme/modules/homefeatured/homefeatured.tpl

2. replace:

<a href="{$product.link}" title="{$product.name|escape:html:'UTF-8'}" class="product_image">
 <img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home')}" height="{$homeSize.height}" width="{$homeSize.width}" alt="{$product.name|escape:html:'UTF-8'}" />


<div class="b_d01" style="height:{$homeSize.height}px; width:{$homeSize.width}px;">
 <a href="{$product.link}" title="{$product.name|escape:html:'UTF-8'}" class="product_image">
<img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home')}" alt="{$product.name|escape:html:'UTF-8'}" />

3. in proper *.css file, here "themes/yourtheme/css/global.css" add following style:

need because of modified imageResize(...) function in images.inc.php.
for images in Featured Products block (homefeatured.tpl)
div#featured-products_block_center div.b_d01 a.product_image img {
 display: block;  float: none;
 margin-left: auto;  margin-right: auto;

The similar pattern you can use for all *.tpl files which display product images.


Then in BackOffice for your products, delete previous images and add new images.

Look of previously saved images will stay unchanged.




Link to comment
Share on other sites

  • 2 years later...

I know this post is old, but here's how I solved this problem:


Go to "product_list.css" in "themes/yourtheme/css." Under "#product_list a.product_img_link" delete "border: 1px solid #ccc."  Also converting to png and selecting "Use PNGs" in Backoffice --> Preferences --> Images gave all my images transparent backgrounds.


HTH! :-D

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Create New...