Background Properties not Showing Up on my Mobile

[stefanhk31]

Hi all! I’m relatively new to web development, so apologies for the information flow here–I just want to give you as much info as possible! :)

I’m currently working on my first project (pro-bono) for a client. I set up the background to show a .webp image, to save space. This worked great, until I checked the site on my iPhone and noticed there was just a blank white screen. I figured that my phone was simply not reading the .webp file, so I added a backup .jpg url to my CSS sheet:

html {
background: url(https://stefanhk31.github.io/automated-scribal-id/img/HMML-background-image.webp) no-repeat center center, url(https://stefanhk31.github.io/automated-scribal-id/img/HMML-background-image-backup.jpg) no-repeat center center;
}

This got the image showing on my phone, but now the transparency is not showing up on my title background. It should have a property of background-color: rgba(255, 255, 255, 75%), and it shows up on the Chrome dev window, but not on my phone, for some reason.

It seems that the CSS I’m using for the website is not compatible with all mobile tech…is there a good way to solve this issue?

Here is the HTML/CSS on CodePen:

https://codepen.io/stefanhk31/pen/jevjev

[stefanhk31]

Unfortunately, I am having the issue with .jpg files: the image shows up (it didn’t with .webp), but the transparency on the title box is suddenly not there.

[Beverleyh]

Syntax error: background-color: rgba(255, 255, 255, 0.75); 75% isn’t allowed. Express as a decimal fraction instead.

[Paulie_D]

Interesting Chrome & Firefox (non-mobile) seem to interpret it correctly but other browsers may not.

Edge does not.

[stefanhk31]

Thanks Beverleyh! It does work with the transparency set to a decimal not a percentage.

[Author]

Posts