Grey background on images

Phoca Cart - complex e-commerce extension
volloff
Phoca Newbie
Phoca Newbie
Posts: 6
Joined: 25 Jun 2020, 13:44

Grey background on images

Post by volloff » 25 Jun 2020, 13:56

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
Phoca Hero
Phoca Hero
Posts: 1970
Joined: 28 Nov 2010, 17:20

Re: Grey background on images

Post by christine » 25 Jun 2020, 15:39

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
Phoca Newbie
Phoca Newbie
Posts: 6
Joined: 25 Jun 2020, 13:44

Re: Grey background on images

Post by volloff » 25 Jun 2020, 15:51

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
Phoca Hero
Phoca Hero
Posts: 1970
Joined: 28 Nov 2010, 17:20

Re: Grey background on images

Post by christine » 25 Jun 2020, 16:19

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
Phoca Newbie
Phoca Newbie
Posts: 6
Joined: 25 Jun 2020, 13:44

Re: Grey background on images

Post by volloff » 25 Jun 2020, 17:54

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
Phoca Hero
Phoca Hero
Posts: 1970
Joined: 28 Nov 2010, 17:20

Re: Grey background on images

Post by christine » 25 Jun 2020, 19:49

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

User avatar
dmlwebal
Phoca Enthusiast
Phoca Enthusiast
Posts: 90
Joined: 18 Sep 2019, 12:49

Re: Grey background on images

Post by dmlwebal » 30 Jul 2020, 12:03

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

:)

User avatar
Jan
Phoca Hero
Phoca Hero
Posts: 42718
Joined: 10 Nov 2007, 18:23
Location: Czech Republic
Contact:

Re: Grey background on images

Post by Jan » 03 Aug 2020, 15:17

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

Jan
If you find Phoca extensions useful, please support the project

Post Reply