CODEWITHSUNDEEP
iphonecsssafari
George Grigorita
George Grigorita

Reputation: 1900

background-image in iphone safari not showing up properly

I have a website that I can't get to view properly on the iPhone. The website in question is this and this is how it shows on iPhone:

enter image description here

You can replicate the same behavior by narrowing down the left or right side of the browser. Once you have even the smallest horizontal scroll you will see that the black background shrinks.

The problem is the main property: 

.main {
    background: url("images/bg1-1.png") repeat-y scroll center top transparent;
    margin: 0 auto;
    width: 100%;
}

More precisely the bg1-1.png image that's 1043x14 pixels and it's not repeating as it should and I can't understand why. What I am missing?

Upvotes: 0

Views: 3694

Answers (1)

Brian Tucker
Brian Tucker

Reputation: 310

Your problem is that it is set to width: 100% which makes the div.main scale to be smaller than the rest of the site. You need to set it to be a fixed width so that it doesn't shrink like that.

Upvotes: 1

Related Questions