The hero image renders darker in IE and Edge than in Chrome or Firefox. Any idea why? Log in or register to post comments
I guess because the CSS code that manages this element is: .block-hero-no-image { background-blend-mode: luminosity; background-color: #0074bd; background-image: url("/core/themes/basis/images/texture.png"); background-position: center center; background-repeat: repeat; } The background-blend-mode CSS3 property is not supported by Microsoft browsers: https://www.w3schools.com/cssref/pr_background-blend-mode.asp https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode I would recommend to use another CSS technique for this block - for example CSS opacity or RGBA color. Or may be simply color texture.png file. Log in or register to post comments
Comments
I guess because the CSS code that manages this element is:
.block-hero-no-image {
background-blend-mode: luminosity;
background-color: #0074bd;
background-image: url("/core/themes/basis/images/texture.png");
background-position: center center;
background-repeat: repeat;
}
The background-blend-mode CSS3 property is not supported by Microsoft browsers:
https://www.w3schools.com/cssref/pr_background-blend-mode.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode
I would recommend to use another CSS technique for this block - for example CSS opacity or RGBA color.
Or may be simply color texture.png file.