Magento2: how to auto add grey bg color under photo
1
Always to magento catalog I upload image .jpg with white bg color.
Does anyone know how I can now change all products background for transparent, and add a gray background for all products under the photo?
Like this:
update css theme.less:
.gallery-placeholder {
background-color: #f2f2f2;
}
img.img-responsive {
background-color: #f2f2f2;
}
img.img-responsive.product-image-photo.img-thumbnail.owl-lazy {background-color:#f2f2f2;}
img.img-responsive.product-image-photo.img-thumbnail {
background-color: #f2f2f2;
}
.products-grid .product-item-info .product-top a.photo {background-color:#f2f2f2;}
update2: (The pictures stretched)
view.xml:
<image id="category_page_grid" type="small_image">
<width>240</width>
<height>300</height>
<transparency>false</transparency>
<aspect_ratio>false</aspect_ratio>
<frame>false</frame>
</image>
<image id="category_page_list" type="small_image">
<width>240</width>
<height>300</height>
<transparency>false</transparency>
<aspect_ratio>false</aspect_ratio>
<frame>false</frame>
magento2 styles
asked 15 hours ago
SylvesterSylvester
705216
add a comment |
1
Always to magento catalog I upload image .jpg with white bg color.
Does anyone know how I can now change all products background for transparent, and add a gray background for all products under the photo?
Like this:
update css theme.less:
.gallery-placeholder {
background-color: #f2f2f2;
}
img.img-responsive {
background-color: #f2f2f2;
}
img.img-responsive.product-image-photo.img-thumbnail.owl-lazy {background-color:#f2f2f2;}
img.img-responsive.product-image-photo.img-thumbnail {
background-color: #f2f2f2;
}
.products-grid .product-item-info .product-top a.photo {background-color:#f2f2f2;}
update2: (The pictures stretched)
view.xml:
<image id="category_page_grid" type="small_image">
<width>240</width>
<height>300</height>
<transparency>false</transparency>
<aspect_ratio>false</aspect_ratio>
<frame>false</frame>
</image>
<image id="category_page_list" type="small_image">
<width>240</width>
<height>300</height>
<transparency>false</transparency>
<aspect_ratio>false</aspect_ratio>
<frame>false</frame>
magento2 styles
asked 15 hours ago
SylvesterSylvester
705216
add a comment |
1
1
1
Always to magento catalog I upload image .jpg with white bg color.
Does anyone know how I can now change all products background for transparent, and add a gray background for all products under the photo?
Like this:
update css theme.less:
.gallery-placeholder {
background-color: #f2f2f2;
}
img.img-responsive {
background-color: #f2f2f2;
}
img.img-responsive.product-image-photo.img-thumbnail.owl-lazy {background-color:#f2f2f2;}
img.img-responsive.product-image-photo.img-thumbnail {
background-color: #f2f2f2;
}
.products-grid .product-item-info .product-top a.photo {background-color:#f2f2f2;}
update2: (The pictures stretched)
view.xml:
<image id="category_page_grid" type="small_image">
<width>240</width>
<height>300</height>
<transparency>false</transparency>
<aspect_ratio>false</aspect_ratio>
<frame>false</frame>
</image>
<image id="category_page_list" type="small_image">
<width>240</width>
<height>300</height>
<transparency>false</transparency>
<aspect_ratio>false</aspect_ratio>
<frame>false</frame>
magento2 styles
asked 15 hours ago
SylvesterSylvester
705216
Always to magento catalog I upload image .jpg with white bg color.
Does anyone know how I can now change all products background for transparent, and add a gray background for all products under the photo?
Like this:
update css theme.less:
.gallery-placeholder {
background-color: #f2f2f2;
}
img.img-responsive {
background-color: #f2f2f2;
}
img.img-responsive.product-image-photo.img-thumbnail.owl-lazy {background-color:#f2f2f2;}
img.img-responsive.product-image-photo.img-thumbnail {
background-color: #f2f2f2;
}
.products-grid .product-item-info .product-top a.photo {background-color:#f2f2f2;}
update2: (The pictures stretched)
view.xml:
<image id="category_page_grid" type="small_image">
<width>240</width>
<height>300</height>
<transparency>false</transparency>
<aspect_ratio>false</aspect_ratio>
<frame>false</frame>
</image>
<image id="category_page_list" type="small_image">
<width>240</width>
<height>300</height>
<transparency>false</transparency>
<aspect_ratio>false</aspect_ratio>
<frame>false</frame>
magento2 styles
magento2 styles
asked 15 hours ago
SylvesterSylvester
705216
asked 15 hours ago
SylvesterSylvester
705216
edited 14 hours ago
Sylvester
asked 15 hours ago
SylvesterSylvester
705216
asked 15 hours ago
SylvesterSylvester
705216
asked 15 hours ago
SylvesterSylvester
705216
705216
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
2
In your theme's etc/view.xml update / set "transparency" , "aspect_ratio" and "frame" to "false" like in both grid and list view , like example below :
<image id="category_page_grid" type="small_image">
<transparency>false</transparency>
<aspect_ratio>false</aspect_ratio>
<frame>false</frame>
</image>
<image id="category_page_list" type="small_image">
<transparency>false</transparency>
<aspect_ratio>false</aspect_ratio>
<frame>false</frame>
</image>
after that flush cache and hope you will see the impact. Lastly using css you can set image box background to any color.
answered 15 hours ago
Naveed AsimNaveed Asim
2,6842317
I update view.xml and cache flush. After this on web/css/theme.less I add below code: (update on question). Can you please check I correct do for our website? gerris.pl
– Sylvester
14 hours ago
But now I see images width and height are changed. (update2) on quesiton.
– Sylvester
14 hours ago
you need to adjust width and height or giv try by removing <aspect_ratio> tags first
– Naveed Asim
14 hours ago
Ok, now I detele tag <aspect_ration> and now width and height display correct. But now how to add grey bg color under image?
– Sylvester
14 hours ago
i belive the images you have uploaded are with transparent background so now using css you can add image box background to what ever color you want
– Naveed Asim
14 hours ago
|
show 3 more comments
0
Upload image with grey background
OR
Set container background color as grey and add transparent image (.png format)
answered 15 hours ago
soofzsoofz
559
add a comment |
Your Answer
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "479"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f265163%2fmagento2-how-to-auto-add-grey-bg-color-under-photo%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
In your theme's etc/view.xml update / set "transparency" , "aspect_ratio" and "frame" to "false" like in both grid and list view , like example below :
<image id="category_page_grid" type="small_image">
<transparency>false</transparency>
<aspect_ratio>false</aspect_ratio>
<frame>false</frame>
</image>
<image id="category_page_list" type="small_image">
<transparency>false</transparency>
<aspect_ratio>false</aspect_ratio>
<frame>false</frame>
</image>
after that flush cache and hope you will see the impact. Lastly using css you can set image box background to any color.
answered 15 hours ago
Naveed AsimNaveed Asim
2,6842317
I update view.xml and cache flush. After this on web/css/theme.less I add below code: (update on question). Can you please check I correct do for our website? gerris.pl
– Sylvester
14 hours ago
But now I see images width and height are changed. (update2) on quesiton.
– Sylvester
14 hours ago
you need to adjust width and height or giv try by removing <aspect_ratio> tags first
– Naveed Asim
14 hours ago
Ok, now I detele tag <aspect_ration> and now width and height display correct. But now how to add grey bg color under image?
– Sylvester
14 hours ago
i belive the images you have uploaded are with transparent background so now using css you can add image box background to what ever color you want
– Naveed Asim
14 hours ago
|
show 3 more comments
2
In your theme's etc/view.xml update / set "transparency" , "aspect_ratio" and "frame" to "false" like in both grid and list view , like example below :
<image id="category_page_grid" type="small_image">
<transparency>false</transparency>
<aspect_ratio>false</aspect_ratio>
<frame>false</frame>
</image>
<image id="category_page_list" type="small_image">
<transparency>false</transparency>
<aspect_ratio>false</aspect_ratio>
<frame>false</frame>
</image>
after that flush cache and hope you will see the impact. Lastly using css you can set image box background to any color.
answered 15 hours ago
Naveed AsimNaveed Asim
2,6842317
I update view.xml and cache flush. After this on web/css/theme.less I add below code: (update on question). Can you please check I correct do for our website? gerris.pl
– Sylvester
14 hours ago
But now I see images width and height are changed. (update2) on quesiton.
– Sylvester
14 hours ago
you need to adjust width and height or giv try by removing <aspect_ratio> tags first
– Naveed Asim
14 hours ago
Ok, now I detele tag <aspect_ration> and now width and height display correct. But now how to add grey bg color under image?
– Sylvester
14 hours ago
i belive the images you have uploaded are with transparent background so now using css you can add image box background to what ever color you want
– Naveed Asim
14 hours ago
|
show 3 more comments
2
2
2
In your theme's etc/view.xml update / set "transparency" , "aspect_ratio" and "frame" to "false" like in both grid and list view , like example below :
<image id="category_page_grid" type="small_image">
<transparency>false</transparency>
<aspect_ratio>false</aspect_ratio>
<frame>false</frame>
</image>
<image id="category_page_list" type="small_image">
<transparency>false</transparency>
<aspect_ratio>false</aspect_ratio>
<frame>false</frame>
</image>
after that flush cache and hope you will see the impact. Lastly using css you can set image box background to any color.
answered 15 hours ago
Naveed AsimNaveed Asim
2,6842317
In your theme's etc/view.xml update / set "transparency" , "aspect_ratio" and "frame" to "false" like in both grid and list view , like example below :
<image id="category_page_grid" type="small_image">
<transparency>false</transparency>
<aspect_ratio>false</aspect_ratio>
<frame>false</frame>
</image>
<image id="category_page_list" type="small_image">
<transparency>false</transparency>
<aspect_ratio>false</aspect_ratio>
<frame>false</frame>
</image>
after that flush cache and hope you will see the impact. Lastly using css you can set image box background to any color.
answered 15 hours ago
Naveed AsimNaveed Asim
2,6842317
answered 15 hours ago
Naveed AsimNaveed Asim
2,6842317
answered 15 hours ago
Naveed AsimNaveed Asim
2,6842317
answered 15 hours ago
Naveed AsimNaveed Asim
2,6842317
2,6842317
I update view.xml and cache flush. After this on web/css/theme.less I add below code: (update on question). Can you please check I correct do for our website? gerris.pl
– Sylvester
14 hours ago
But now I see images width and height are changed. (update2) on quesiton.
– Sylvester
14 hours ago
you need to adjust width and height or giv try by removing <aspect_ratio> tags first
– Naveed Asim
14 hours ago
Ok, now I detele tag <aspect_ration> and now width and height display correct. But now how to add grey bg color under image?
– Sylvester
14 hours ago
i belive the images you have uploaded are with transparent background so now using css you can add image box background to what ever color you want
– Naveed Asim
14 hours ago
|
show 3 more comments
I update view.xml and cache flush. After this on web/css/theme.less I add below code: (update on question). Can you please check I correct do for our website? gerris.pl
– Sylvester
14 hours ago
But now I see images width and height are changed. (update2) on quesiton.
– Sylvester
14 hours ago
you need to adjust width and height or giv try by removing <aspect_ratio> tags first
– Naveed Asim
14 hours ago
Ok, now I detele tag <aspect_ration> and now width and height display correct. But now how to add grey bg color under image?
– Sylvester
14 hours ago
i belive the images you have uploaded are with transparent background so now using css you can add image box background to what ever color you want
– Naveed Asim
14 hours ago
I update view.xml and cache flush. After this on web/css/theme.less I add below code: (update on question). Can you please check I correct do for our website? gerris.pl
– Sylvester
14 hours ago
I update view.xml and cache flush. After this on web/css/theme.less I add below code: (update on question). Can you please check I correct do for our website? gerris.pl
– Sylvester
14 hours ago
But now I see images width and height are changed. (update2) on quesiton.
– Sylvester
14 hours ago
But now I see images width and height are changed. (update2) on quesiton.
– Sylvester
14 hours ago
you need to adjust width and height or giv try by removing <aspect_ratio> tags first
– Naveed Asim
14 hours ago
you need to adjust width and height or giv try by removing <aspect_ratio> tags first
– Naveed Asim
14 hours ago
Ok, now I detele tag <aspect_ration> and now width and height display correct. But now how to add grey bg color under image?
– Sylvester
14 hours ago
Ok, now I detele tag <aspect_ration> and now width and height display correct. But now how to add grey bg color under image?
– Sylvester
14 hours ago
i belive the images you have uploaded are with transparent background so now using css you can add image box background to what ever color you want
– Naveed Asim
14 hours ago
i belive the images you have uploaded are with transparent background so now using css you can add image box background to what ever color you want
– Naveed Asim
14 hours ago
|
show 3 more comments
0
Upload image with grey background
OR
Set container background color as grey and add transparent image (.png format)
answered 15 hours ago
soofzsoofz
559
add a comment |
0
Upload image with grey background
OR
Set container background color as grey and add transparent image (.png format)
answered 15 hours ago
soofzsoofz
559
add a comment |
0
0
0
Upload image with grey background
OR
Set container background color as grey and add transparent image (.png format)
answered 15 hours ago
soofzsoofz
559
Upload image with grey background
OR
Set container background color as grey and add transparent image (.png format)
answered 15 hours ago
soofzsoofz
559
answered 15 hours ago
soofzsoofz
559
answered 15 hours ago
soofzsoofz
559
answered 15 hours ago
soofzsoofz
559
559
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Magento Stack Exchange!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f265163%2fmagento2-how-to-auto-add-grey-bg-color-under-photo%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
