iPhone Background Issue

HTML & CSS
1

On this site (websearchroi.com), when it is viewed on an iPhone, the homepage city background does not appear. See screenshot here:
http://oi65.tinypic.com/33peo13.jpg
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.

2

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

3

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

See post #3.

4

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.

5

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.

6

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.

7

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