Home > Magento > Change Image Background Colour

Change Image Background Colour

Posted on: 8th Mar 2010 By: Adam Moss 4 Comments

Something that may irritate many Magento developers is the way that product images on both the product list and product view pages show white backgrounds when the image doesn’t fit the standard ratio. Rather than there being a simple way to change this in the configuration area, it’s up to us to find it by once again digging deep into the lower echelons of Magento’s core code. This time you need to open the file at the following path, *deep breath* :

app > code > core > Mage > Catalog > Model > Product > Image.php

There’s a line of code in there which is fairly self-explanatory:

protected $_backgroundColor  = array(255, 255, 255);

The nine-digit RGB code determines which colour is shown by default in the product image backgrounds, and 255, 255, 255 is simply white, or #FFF. Using the eyedropper tool in a program like Photoshop is a good way of getting the RGB code for the colour that you require. Simply replace the numbers with the ones you require and upload. Job Done.

Before:

After:

4 Responses to “ Change Image Background Colour ”

  1. kashif
    #1 | 29th April 2010

    hi
    i am newly magento developer.
    i have a problem,i want to set background image in magento CMS pages which can be one or more.
    if any body have any idea abt that how i can add or set images in magento pages then plz tel me

    kashif

  2. Ken M
    #2 | 8th June 2010

    Absolutely marvellous much better answer to the rest of the pages I’ve tried, only wish that this was the 1st page I tried, not the 15th :)

  3. Chris B
    #3 | 20th August 2011

    Is there any way of making the backgrounds transparent? I tried adding a fourth number (hoping it would represent the alpha channel) and commenting out the line altogether, to no avail… any ideas?

  4. shalini
    #4 | 16th November 2011

    can anyone tell me how to set the background image of page in magento…..? plz send me solution to shalini@fasdec.org

Post A Comment

Your comments:
Enclose code snippets within the appropriate tags: [php][/php]   [js][/js]   [xml][/xml]   [css][/css]   [html][/html]
E.g: [php]<?php echo "hello world"; ?>[/php]

Search Blog

Archives

For the record...

Views & opinions in this blog are those of the individual and do not necessarily reflect those of E-commerce Web Design or the Creare Group.