2

anyone know how or it is possible to set background color for product photo?

example when I added clean product photo then final I want after save magento display (now display on white bg): enter image description here

@ Kalyan Chakravarthi V

Now when I added product with image and save then display on white background: enter image description here

I want after add product with image (background transparent or white) and save then display on website with an automatic background (grey) added by magento.

example: enter image description here

@update code theme.less

.label,
label {
    font-size: 13px;
    color: #5f5f5f;
    padding: 0;
    margin: 0 0 9px;
    font-weight: 400;
    text-align: left;
    line-height: inherit;
}

::-webkit-input-placeholder {
    color: #c1c1c1
}

:-moz-placeholder {
    color: #c1c1c1
}

::-moz-placeholder {
    color: #c1c1c1
}

:-ms-input-placeholder {
    color: #c1c1c1
}
.gallery-placeholder {
    background-color: yellow;
}
1

Just add this to your _theme.less

app/YourVendor/YourTheme/web/css/source/_theme.less

.gallery-placeholder {
    background-color: yellow;
}

but I check your website you load images with background

For your theme: I tried and swap image to transparent one and this worked for me on your page on product page.

img.img-responsive {
    background-color: red;
}

this one for carusel

img.img-responsive.product-image-photo.img-thumbnail.owl-lazy {background-color:red;}

for Deal of the day

img.img-responsive.product-image-photo.img-thumbnail {
    background-color: red;
}

.products-grid .product-item-info .product-top a.photo {background-color:red;}
  • any other solution? – Sylvester Jul 16 '18 at 19:54
  • In main topic I show you code theme.less. Also I have deleted pub/static/frontend/* unfortunately it still does not work :( – Sylvester Jul 16 '18 at 20:10
  • Thanks for update and try help me. Please check: accessories-men/sunglasses-men.html I try add after update code for deal of the day and normal product but no result :(( – Sylvester Jul 16 '18 at 20:21
  • .product-top { background-color: red; } and on product page .xxx.product.media { background-color: red; } – BartZalas Jul 16 '18 at 21:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.