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 Mar 10 at 10:53
SylvesterSylvester
735216
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 Mar 10 at 10:53
SylvesterSylvester
735216
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 Mar 10 at 10:53
SylvesterSylvester
735216
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 Mar 10 at 10:53
SylvesterSylvester
735216
asked Mar 10 at 10:53
SylvesterSylvester
735216
edited Mar 10 at 12:25
Sylvester
asked Mar 10 at 10:53
SylvesterSylvester
735216
asked Mar 10 at 10:53
SylvesterSylvester
735216
asked Mar 10 at 10:53
SylvesterSylvester
735216
735216
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 Mar 10 at 11:48
Naveed AsimNaveed Asim
2,7142317
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
Mar 10 at 12:15
But now I see images width and height are changed. (update2) on quesiton.
– Sylvester
Mar 10 at 12:17
you need to adjust width and height or giv try by removing <aspect_ratio> tags first
– Naveed Asim
Mar 10 at 12:27
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
Mar 10 at 12:31
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
Mar 10 at 12:37
|
show 3 more comments
0
Upload image with grey background
OR
Set container background color as grey and add transparent image (.png format)
answered Mar 10 at 11:48
soofzsoofz
6010
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 Mar 10 at 11:48
Naveed AsimNaveed Asim
2,7142317
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
Mar 10 at 12:15
But now I see images width and height are changed. (update2) on quesiton.
– Sylvester
Mar 10 at 12:17
you need to adjust width and height or giv try by removing <aspect_ratio> tags first
– Naveed Asim
Mar 10 at 12:27
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
Mar 10 at 12:31
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
Mar 10 at 12:37
|
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 Mar 10 at 11:48
Naveed AsimNaveed Asim
2,7142317
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
Mar 10 at 12:15
But now I see images width and height are changed. (update2) on quesiton.
– Sylvester
Mar 10 at 12:17
you need to adjust width and height or giv try by removing <aspect_ratio> tags first
– Naveed Asim
Mar 10 at 12:27
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
Mar 10 at 12:31
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
Mar 10 at 12:37
|
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 Mar 10 at 11:48
Naveed AsimNaveed Asim
2,7142317
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 Mar 10 at 11:48
Naveed AsimNaveed Asim
2,7142317
answered Mar 10 at 11:48
Naveed AsimNaveed Asim
2,7142317
answered Mar 10 at 11:48
Naveed AsimNaveed Asim
2,7142317
answered Mar 10 at 11:48
Naveed AsimNaveed Asim
2,7142317
2,7142317
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
Mar 10 at 12:15
But now I see images width and height are changed. (update2) on quesiton.
– Sylvester
Mar 10 at 12:17
you need to adjust width and height or giv try by removing <aspect_ratio> tags first
– Naveed Asim
Mar 10 at 12:27
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
Mar 10 at 12:31
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
Mar 10 at 12:37
|
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
Mar 10 at 12:15
But now I see images width and height are changed. (update2) on quesiton.
– Sylvester
Mar 10 at 12:17
you need to adjust width and height or giv try by removing <aspect_ratio> tags first
– Naveed Asim
Mar 10 at 12:27
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
Mar 10 at 12:31
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
Mar 10 at 12:37
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
Mar 10 at 12:15
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
Mar 10 at 12:15
But now I see images width and height are changed. (update2) on quesiton.
– Sylvester
Mar 10 at 12:17
But now I see images width and height are changed. (update2) on quesiton.
– Sylvester
Mar 10 at 12:17
you need to adjust width and height or giv try by removing <aspect_ratio> tags first
– Naveed Asim
Mar 10 at 12:27
you need to adjust width and height or giv try by removing <aspect_ratio> tags first
– Naveed Asim
Mar 10 at 12:27
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
Mar 10 at 12:31
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
Mar 10 at 12:31
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
Mar 10 at 12:37
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
Mar 10 at 12:37
|
show 3 more comments
0
Upload image with grey background
OR
Set container background color as grey and add transparent image (.png format)
answered Mar 10 at 11:48
soofzsoofz
6010
add a comment |
0
Upload image with grey background
OR
Set container background color as grey and add transparent image (.png format)
answered Mar 10 at 11:48
soofzsoofz
6010
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 Mar 10 at 11:48
soofzsoofz
6010
Upload image with grey background
OR
Set container background color as grey and add transparent image (.png format)
answered Mar 10 at 11:48
soofzsoofz
6010
answered Mar 10 at 11:48
soofzsoofz
6010
answered Mar 10 at 11:48
soofzsoofz
6010
answered Mar 10 at 11:48
soofzsoofz
6010
6010
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
