Hi,
I’m having a problem with a background image to which I’ve applied background-blend-mode in CSS.
The problem occurs only when I look at the background image under two conditions:
(1) in portrait orientation, and
(2) using Chrome as the browser.
When I do those two things, then the blue overlay (caused by using background-blend-mode) starts to disappear when I put my finger on the screen and move down the page. )I want the blue overlay to stay, whether I move down the page or stay at the top of the page.)
(I’ve tried to copy the relevant bits of it into Codepen – see here: https://codepen.io/HorrieGrump/pen/WyaMgv – but it doesn’t seem to be working when I look at it on a phone screen … which is the kind of screen on which I’m having the problems. You can see a better version of it here: http://www.sxo.bkw.mybluehost.me)
Would anyone be kind enough to let me know what the problem is? (BTW, the relevant CSS appears under the class with the name “one” – or .one – if that makes it quicker to find the problem.
Thanks for your help.
