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

The site

https://angelahunte.com/index.html 

Misty

2121

CSS

Avatar of undefined
Last Comment
David Schure

8/22/2022 - Mon
Chris Stanyon

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.
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?

Chris Stanyon

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
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
David Schure

ASKER
Hi Chris. I got it down to 426kb still the same issue....
Mobile Display.MP4
Chris Stanyon

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.
David Schure

ASKER
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.


⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
Chris Stanyon

Not sure what else to suggest. I can't replicate the issue, so struggling to see what the problem is.
David Schure

ASKER
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.
Chris Stanyon

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.
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
David Schure

ASKER
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?
David Schure

ASKER
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.
David Schure

ASKER
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

⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
ASKER CERTIFIED SOLUTION
David Schure

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.