0

I have set a background color for my header which has a background image for my header which is

background-color: rgb(0 74 49 / 70%);
background-blend-mode: overlay;

It appears well in most devices but doesn't it iphone SE.

Is there anything wrong with the code? Or any other reason why it is not appearing on that specific device? Going crazy working for a solution.

newbie747
  • 1
  • Did you forget commas in the `rgb()`? In the MDN docs I don't see where commas aren't used in these examples: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb() – insyri Oct 19 '21 at 11:39
  • 1. It should be RGBA (A for Alpha - the opacity). 2. It should be in the format: `rgba(0, 0, 0, 100%)` – DannyXCII Oct 19 '21 at 11:40
  • Why not using `background-color: rgba (0, 74, 49, 0.7);` Not the 'a' in rgba – bron Oct 19 '21 at 11:42
  • From what I know, RGBA and RGB have the same capabilities; rgb can do opacity the same way rgba can(?), source: https://stackoverflow.com/questions/24538501/what-are-differences-between-rgb-vs-rgba-other-than-opacity – insyri Oct 19 '21 at 11:43
  • The syntax of your background color looks fine - but I don't have an iPhone SE to test on. On an iPad IOS 14 the blending is working OK. However, there was some thought in the past that background-repeat: no-repeat was required, no idea why but perhaps worth a try. – A Haworth Oct 19 '21 at 13:33

0 Answers0