Background Image Blurry on Mobile

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.

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?

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;
}

Select allOpen 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.

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;
}

Select allOpen 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%;
      }

Select allOpen 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;
}

}

Select allOpen in new window