Grey background on images

[volloff]

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!

[christine]

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

[volloff]

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

[christine]

Hi,

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

Code: Select all

div.pp_overlay{background:#000;display:none;left:0;position:absolute;top:0;width:100%;z-index:9500}

PrettyPhoto.css

Kind regards
Christine

[volloff]

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

[christine]

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

[dmlwebal]

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;
}

[Jan]

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

Jan