Avada Forums Community Forum Blurry background image

Viewing 15 posts - 1 through 15 (of 30 total)
  • Author
    Posts
  • errington84
    Participant
    Post count: 4

    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
    Participant
    Post count: 14

    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
    Participant
    Post count: 4

    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
    Participant
    Post count: 14

    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
    Participant
    Post count: 4

    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
    Participant
    Post count: 4

    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
    Keymaster
    Post count: 528

    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
    Participant
    Post count: 8

    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
    Participant
    Post count: 873

    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
    Participant
    Post count: 8

    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
    Participant
    Post count: 873

    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
    Participant
    Post count: 8

    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
    Participant
    Post count: 873

    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
    Participant
    Post count: 8

    from one Mark to another , thanks.

    Serialbagmakers
    Participant
    Post count: 3

    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 😉

Viewing 15 posts - 1 through 15 (of 30 total)
  • You must be logged in to reply to this topic.