Hello,
During Black Friday I had created a banner image that appeared on both the Catalog and Product Category pages via CSS. I’d used the following code to make it work:
/* Sales Banner on Product Category Pages */
@media screen and (max-width:767px){
.h-landmark::before
{
content: url(https://itsacruisego.com/wp-content/uploads/2018/11/BlackFriday-Page-Banner-350px.jpg);
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -moz-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
width: 100%;
}
}
@media screen and (min-width:768px){
.h-landmark::before
{
content: url(https://itsacruisego.com/wp-content/uploads/2018/11/BlackFriday-Page-Banner-900.jpg);
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -moz-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
width: 100%;
}
}
/* Sales Banner on Storefront
@media screen and (max-width:767px){
.woocommerce .entry-header.shop
{
content: url(https://itsacruisego.com/wp-content/uploads/2018/11/BlackFriday-Page-Banner-767px.jpg);
width: 100%;
}
}
@media screen and (min-width:768px){
.woocommerce .entry-header.shop
{
content: url(https://itsacruisego.com/wp-content/uploads/2018/11/BlackFriday-Page-Banner-1250px-v1.jpg);
width: 100%;
}
}
My frustration was that the banner displayed perfectly fine on Firefox, but the responsive resizing failed on Chrome and Safari. As such, I ended up adding the breakpoints you see above and then resized the banner image for those breakpoints to make it work, but I really wanted to have it work with one image that was responsive.
With Christmas coming, I’m sure our customer is going to want to do this again, so any insight into what I’d missed would be really appreciated, thanks.