iPhone Background Issue

On this site (websearchroi.com), when it is viewed on an iPhone, the homepage city background does not appear. See screenshot here:
But when it is viewed on an Android, or in any iPhone user agent or simulator, the city skyline background DOES correctly appear. I do not have an iPhone so I’m unable to reproduce it and troubleshoot.

The background is simply a css image background:

#intro {background: rgba(0, 0, 0, Innocent url("/wp-content/uploads/site-elements/philadelphia-digital-marketing-mobile.jpg") repeat scroll 0 0;}

Any idea why this would be occurring and how to resolve? Please advise. Thanks in advance.

One thing I see is you have no closing bracket for the rgba()

I would guess it’s the same issue as seen here.

See post #3.

What does the ‘innocent’ word do? I don’t know that term in background. I wonder if it is malformed as RGBA requires 4 values the last being opacity 0-1

#intro {background: rgba(0, 0, 0,0.8) url("/wp-content/uploads/site-elements/philadelphia-digital-marketing-mobile.jpg") repeat scroll 0 0;}'

I think that looks more like i would expect but i could be wrong. The 0.8 could be anything between 0 and 1 depending on what you want, but that should only show if the image doesn’t if i am correct in my thinking.

Viewing in inspect the css looks like this:-

#intro {
	background: url("/wp-content/uploads/site-elements/philadelphia-digital-marketing.gif") no-repeat bottom fixed;
	padding: 170px 0;
	color: #fff;
	height: 700px;
	background-size: cover;
	width: 100%;
	clear: both;
	margin: 0 auto;
	overflow: hidden;
	text-align: center;

I don’t see “Innocent” or rgba() in there.

The image is showing in my real iphone and on the mac ios simulator.

You do have to scroll a little to see it as that blue portion is the top of the image. You’d need to use a smaller image with less blue at the top if you want it to appear above the fold.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.