CODEWITHSUNDEEP
htmlcssiphonetwitter-bootstrapipad
christian
christian

Reputation: 114

Background Images not displayed correctly on Iphone and Ipad

I have already asked a question similar to this an thought my problem was fixed, but it isn't.

Following code is used for all background-images (image path not always the same):

.bg-1 { 
background: url('../Dateien/sharkGround1920.jpg') no-repeat center center fixed;
background-size: cover;
background-attachment:fixed;
}

works great on all devices even IMac, but is displayed incorrectly on Iphone and Ipad.

I do want the background-size to be 'cover' as this just looks best for what I'm using it.

I figured out, that when I test the site on a responive-check-site on the internet, I can reproduce the bad Iphone look of my website by increasing the devices height and leaving the width fixed.

My Website: http://www.unterwasserfotografie-thomas-uhl.de/

The Test-Website: http://responsivepx.com/

Funny thing: I can test my site on all test websites around the web and it always looks great on Iphone-setup. As soon as testing on a real Iphone the images look like zoomed in.

Upvotes: 0

Views: 593

Answers (1)

rafahell
rafahell

Reputation: 315

Hi Christin you should insert a media queries and replace the background-attachment for "scroll". Please see below:

@media only screen and (min-width: 768px){ .bg-1 { background: url('../Dateien/sharkGround1920.jpg') no-repeat center center fixed; background-size: cover; background-attachment:scroll !important; } }

Upvotes: 1

Related Questions