Hi! I'm finishing my simple website project. But... I have trouble with background behaviour on devices with retina display.

 

Backgrounds work well on Macbook Pro and iPad, but doesn't cooperate on iPhones - they don't scale and get pixelised. I looked for the solutions on the web, but they helped with the half of the problem.

 

This is result on my first testing site, with the css I didn't modify. And on the iPhones it looks like this:

 

http://annakrauze.co.uk/mk/akademia/index.php

 

 

I looked for many tutorials on the web and I made a second testing website. I added come css which were supposed to help on Retina devices and I enlarged bacgrounds twice the original size. And this is how it looks - backgrounds still don't scale and in some places they just miss the parts they supposed to be visible:

http://annakrauze.co.uk/mk/akademia/test/index.html

 

I'm not a professional front-end developer, I'm a self-learner. I know my code may have MANY mistakes. But still, If anyone could help, or at least give me some advice what to do I'll be very gratefull!!! I'm running out of the ideas

 

 

Remove "fixed" from the background property for your .jumbotron element.

 

Thank you so much for reply!

 

I removed all the "fixed" background properties on the first testing site:

 

http://annakrauze.co.uk/mk/akademia/index.php

 

 

But then the background loses its "sliding" parallax effect, like it's still visible on my second testing page:

 

http://annakrauze.co.uk/mk/akademia/test/index.html

 

 

Is there any chance to make the best of both worlds? Thank you in advance for help!!!