Blurry background image

[errington84]

#511528

Hi,

I have two websites and both have Avada both up to date versions, however, one has background images that are blurry? Parallax is off on both.

Blurry site: http://send-elearning-training.uk/special-educational-needs-training/
None blurry: http://www.mindover-matter.com/

Any ideas?

Ben

[pbeaulieu]

#511559

Actually, both images are blurry. The ocean is blurring also, you just can’t pick up on it as the light color against a white background minimizes it. First the headers are 300 X 132 pixels. the image is way too small for a hero image. What happens is the image becomes stretched to fit the screen and pixelized. That means if an image is 300 pixels wide, you can’t make the image 800 pixels wide. There is going to be degradation of the image. You need to start with a larger image, then save it to the proper dimensions and dpi. Only then can you resize and optimize the image. Do you have the originals images (300dpi or 240dpi)? If not, I would look for a piece of stock photography that will fit your needs. Please contact me if you need more help.

[errington84]

#511563

Hi,

Yes sorry wrong url http://www.mindover-matter.com/fears-phobias-westyorkshire/ this is in no way blurry and I’m aware of the ocean picture but the customer loves it and doesn’t want any other. The issue isn’t the image size as the other image is over 1000px. Are you aware of any issue that may cause the blurriness?

Ben

[pbeaulieu]

#511571

Ok, I looked at the image in Photoshop. The image is being resized or ‘stretched’ to fit into the image dimensions. Though the image is 1000 X 700, Avada is cropping the image and zooming in on it past 100% . This is why you are seeing distortion. What I would do is is crop off some of the image so it is more of a rectangle, not a square. You need to at minimum, crop off about 300px from the bottom of the image, creating more of a rectangle. then upload it again. Also the image is very large (6.2mb). Cropping it will help reduce the file size.

[errington84]

#511787

Thank you for the feedback, I have done what you have suggested, but it doesn’t seem to have made any difference. Any other ideas about could be causing it?

[errington84]

#511905

I have looked at the HTML source and for some reason Avada is setting the image to 300×120 in the html and then trying to blow it up. When I have checked in the media file the size is what I set it to over 1000px. Any ideas where I can alter this?

[Michael C]

#511972

When inserting your image, ensure that you are selecting the full size version. If you are seeing an image with 300px for example, then it very much sounds like another media size is being selected.

Example – http://prntscr.com/kufslv

[mballew8]

#660560

This seems to still be an issue in 2019, I just installed Crypto currency theme and every thing I try has the hero background image blurry, I have even set the image size to be the exact same as the sample background girl holding 2 coins. Definitely the theme is not handling images correctly in this case. https://motivatedly.com/

[marklchaves]

#660765

Hi @mballew8,

I have even set the image size to be the exact same as the sample background girl holding 2 coins. Definitely the theme is not handling images correctly in this case.

Hmmmm. I don’t think so. Your background image is 300 x 161.

https://motivatedly.com/wp-content/uploads/2019/10/mobile-phone-1419275_1920-4-300×161.jpg

The Crypto’s background image is 1600 x 860. That’s a significant difference imho.

https://avada.theme-fusion.com/cryptocurrency/wp-content/uploads/sites/110/2019/01/avada-crypto-header-bg.jpg

[mballew8]

#660766

A previous poster had similar dimensions reported when someone analyzed their page when they reported the issue, I’m including a screenshot of media page showing the image dimensions.
https://prnt.sc/piu4eo

Just a thought, could it be how the theme is accessing media images, it seems like this is being interpreted as a medium size image, I’ve left the media settings default, medium is set to 300x which matches what your finding, here another screenshot.
https://prnt.sc/piu5bs

Thanks for looking into this, it’s greatly appreciated.

[marklchaves]

#660771

There’s no interpretation from what I can see. If you look at your source code, your background image is set to the 300w version.

Your Code

https://imgur.com/a/Ks2nYRC

If you change that to point to your 1600w, you’ll be good to go.

Fusion Builder Container Element Settings

https://theme-fusion.com/documentation/fusion-builder/elements/container-element/

[mballew8]

#661111

Thanks, since I’ve only upload the 1600x image and not touched code, WordPress or Avada, just changed image in demo theme to use my uploaded image, and since demo theme has no control for medium, large, thumb, I’ll log a support ticket, it does seem to be a bug in demo data or theme or framework, I’ve not done anything out of the ordinary except use defaulting behavior , so for it to display the 300x would seem to be a bug somehow in Avada.

[marklchaves]

#661178

Or, add this to your page’s CSS.

.fusion-fullwidth.fullwidth-box.fusion-builder-row-1.fusion-parallax-none.nonhundred-percent-fullwidth.non-hundred-percent-height-scrolling {

    background-image: url(https://motivatedly.com/wp-content/uploads/2019/10/mobile-phone-1419275_1920-4.jpg);

}

You might want to set a CSS ID to that container if you go this route. Just to avoid any potential future conflicts.

Screen grab.

https://imgur.com/a/HhxIJak

[mballew8]

#661520

from one Mark to another , thanks.

[Serialbagmakers]

#662191

Thanks to this thread and the non-answers, I found the reason why we all have a small image, although we upload the big picture.
When you select the image, WordPress changes it automatically to the medium size (300px wide)
If you manually adjust this to the original size, then you don’t have a blurry image anymore 😉

[Author]

Posts