Phoca Forum

Hi, I upload images with a white background, and when resizing it is overlaid with a gray background (example in the attachment). How can I fix it? Thank you in advance!

Hi,

it depends e.g. on style sheet(s), CSS, which template etc. To see it live with an URL, would be preferable.

Kind regards
Christine

hi Christine, I make up the template myself, but here is the link. The image shows a gray background, although the original photo has a clean white background. I tried on the native jooomla Protostar template, there is the same effect.
http://granit-zavod1.ru/catalog/1-marbl ... ts/4-ddddd

Hi,

Thanks for the URL. Do you mean this background-color?
PrettyPhoto.css

Kind regards
Christine

No, without clicking anything, look at the image. If you look closely, it has a gray background, but in the original image it is perfectly white

Hi,

on above URL, it's now blank: no images. Then I checked e.g. http://granit-zavod1.ru/catalog/1-marble-monuments#
1st image: http://granit-zavod1.ru/images/phocacar ... _mram1.jpg = grey

Which menue & image please?

You can see the differences via Browser > Extras > Page information > media > images loaded. Some have grey background, others no background.

Kind regards
Christine

Hi

I do not know if you have solved this but pay close attention to Phoca image backgrounds in Chrome Developer

#phImageBox .img-thumbnail and #phImageBox .ph-item-image-full-box.b-thumbnail

these call in a grey background image as a default for the store. The image is url(/templates/phoca_premiere/images/phocacart/bg-cat2.png)

So you can replace this image with an optimised version, or remove the reference from the CSS by adding a line to your custom CSS to prevent this being loaded.

Example of the standard default CSS for Phoca Cart

#phImageBox .img-thumbnail, #phImageBox .ph-item-image-full-box.b-thumbnail {
border-radius: 0px;
box-shadow: none;
background-image: url(/templates/phoca_premiere/images/phocacart/bg-cat2.png);
background-size: cover;
background-position: center top;
width: 100%;
border: 1px solid #fff;
}

Override the CSS for the line starting background image and leave other attributes intact.

So in your custom css you would have a line like this:

#phImageBox .img-thumbnail, #phImageBox .ph-item-image-full-box.b-thumbnail {
background-image: none;
}

and then perhaps add a simple background-color selector to choose the colour you prefer, like this

#phImageBox .img-thumbnail, #phImageBox .ph-item-image-full-box.b-thumbnail {
background-image: none;
background-color: #fafafa;
}

Hi, yes, this is a template feature and can be overriden in custom.css (custom.scss) file.

Jan