Link to home
Start Free TrialLog in
Avatar of David Schure
David Schure

asked on

Background Image Blurry on Mobile

My background image gets blurry on a mobile device. 1920x 1392 300 resolution.

body { background-image: url(assets/img/home/yellowpeel2.png);
       background-position: center center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: cover;
      background-color: #000;
      }

Open in new window

User generated imageThe site

https://angelahunte.com/index.html 

Misty

2121

Avatar of Chris Stanyon
Chris Stanyon
Flag of United Kingdom of Great Britain and Northern Ireland image

Hey David,

Looks fine to me. Checked it in mobile view on Firefox and Chrome, as well as on an actual mobile.

However, I would strongly suggest that you optimise that background image - it's relatively huge - 6.5mb for a background image is massive, and on a mobile, probably won't even load fully - and that's likely why you're seeing it blurry - it's only partialy downloading, so you never get the full res.

I'm sure you can get that down to less than a 1mb without losing any quality - check out some of the online PNG compression utilties, or consider a lossy format such as jpg. You might even want to consider using webp format for your images.
Avatar of David Schure
David Schure

ASKER

Hi Chris...it's nice and clear on the laptop. However on the phone it's blurry.  What settings would you suggest for the background image?
User generated image
OK,

You've got a couple of options here. When you export a PNG, you have the option of 8-bit and 24-bit. This basically sets how many colours are available in the pallete. For hi-res photos, you'd want 24, but for your particular background, I'd try it with 8 and see how it looks. Also, once you've exported as PNG, run it through the online PNG compression tools - this will likely cut the file size down by upto 75% without any loss of quality.

I'd would also try exporting out as JPG, with compression set to about 80. As an abstract background image, you're not likely to notice any quality loss.

Alternatively, you could have 2 background images - one specifically for desktop at the higher resolution, and one for mobile at a much smaller size (you're probably not needing anything more that 500 x 900px). Then use a media query in your CSS to choose which of the 2 images to display based on the device
Hi Chris. I got it down to 426kb still the same issue....
Mobile Display.MP4
Hmm,

I'm struggling to see what's going on. When I view the site, it looks fine.

One thing to try, just to rule out some weird scaling issue. You currently have the size of the background image set to cover. Have a go at changing that to something like auto.

html body {
 background-size: auto;
}

Open in new window

It's likely that will prevent the image from filling the background, but it should prevent it from scaling to fit, so you'll at least know if it's a scale issue.
Tried that. Still the same. I'm on an iPhone 12plus  There is no grain showing like it does on the desktop. It's all blurry.
User generated image
User generated image
Not sure what else to suggest. I can't replicate the issue, so struggling to see what the problem is.
Okay. I did some trouble shooting.  The Media Contact page looks fine. The Events page also looks fine.  I made a page called Test that you access through the Media Contact page. This also looks fine.
Home, This Is Angela, The Beat Goes On and The Mango Project do not look fine (Blurry) So 2 of the six look fine.
Not sure I can offer any more insight into this - all the pages look exactly the same to me - non-blurry.

If I were you, I'd cancel out a problem with the phone. Try it on another phone (same make/model and a different one). Also, empty your cache or try another browser.
Hi Chris.  Okay the pages that show the background correctly have this in the CSS stack.
<style>
body{
      background-image: url("assets/img/events/yell500.png")
      }
.con{
   height:150px;
   }
.med{
   margin-bottom:10px;
   }
.hero-image{
  background-image: url("assets/img/contact/bus.png");
  background-color: #fff;
  height: 515px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

Open in new window

Could the hero-image have anything to do with this?
When I do this. It is no longer blurry (iphone) However, the image is too short.
body{
      background-image: url("assets/img/biography/yell500.png");
      background-size: cover;
      width:100%;
      height:100%;
      }

Open in new window

This Is Angela Page
This seems to be a safari bug from what I am reading.
Solution found!
@media only screen and (max-width : 767px ) {

    body {
        background-attachment: initial;
    }
body:before {
    content: "";
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url(assets/img/home/yell100.png) !important;
    background-size: cover;
    background-position: center center;
}

}

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of David Schure
David Schure

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial