Background image blurry on mobile devices

Question

I'm trying to create a responsive site on Bootstrap and using a background image for the whole body of my site. I am using my background image and setting it to no "repeat center center fixed" and background-size as "cover" as below:

body{

            background: url(img/LandingPageIcarus.jpg) no-repeat center center fixed;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;

        }

So this looks ok in Chrome, Firefox, IE but when I open it with any mobile device the background image is really blurry. I have tried many options from different sources but no luck and I'm really struggling here since this is my first site. I would really appreciate if anyone could shed some light so I can fix the problem.

This is how it looks on the phone my site

Answer 1

When we look at any website through the developer tools' simulator the pixel width value for mobiles are from range of 320px for iPhone5, 360px for Nokia N9, samsung S3, note 3 etc, but is that real? That's no good when it comes for font sizing and images, because these devices have Higher Dpi and you need to take that into consideration, For your issue with the background image use this

@media screen and (min-resolution: 1.5dppx) {
.welcome-header > h1{
  background-image: url('../images/html5_384x384.png');
}
}

@media screen and (min-resolution: 2dppx) {
.welcome-header > h1{
  background-image: url('../images/html5_512x512.png');
}
}

Use higher resolution image of your background for these 2 Dppx ranges

A good guide straight from chrome devs https://developer.chrome.com/multidevice/webview/pixelperfect