Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #28539

    Hi Guys – Please visit http://thecaloriemythbook.com, note the logo in the header, scroll down, and note how the logo text becomes grainy and fuzzy (http://TheCalorieMythBook.com/wp-content/uploads/2013/08/resize.png). We’ve tried using png files and jpeg files, and a bunch of different sizes, but it still ends up grainy when resized. Any ideas on how to avoid this?

    #137863

    Hey,

    Please edit js > avia.js, find this code:

    if(st < el_height/2)
    {
    newH = el_height - st;
    header.removeClass('header-scrolled');
    }
    else
    {
    newH = el_height/2;
    header.addClass('header-scrolled');
    }

    Replace it with:

    if(st < el_height/1.5)
    {
    newH = el_height - st;
    header.removeClass('header-scrolled');
    }
    else
    {
    newH = el_height/1.5;
    header.addClass('header-scrolled');
    }

    This will decrease the header into a much bigger size than before eliminating the grainy logo appearance. Please remove browser cache then reload the page.

    Cheers,

    Ismael

    #137864

    Hi Ismael – Thank you. I tried this but the logo still looks grainy and now there is an odd “jumping” experience happening with the logo in the header on scroll…see: http://thesmarterscienceofslim.com/wp-content/uploads/2013/08/jumpy-and-grainy.mp4

    #137865

    Hi stunna42,

    Try uploading a logo file that starts at the actual dimensions it gets set to: 250px by 88px. Right now you are already starting with a compressed image and then compressing it even further.

    Regards,

    Devin

    #137866

    Will do! Thanks Devin

Viewing 5 posts - 1 through 5 (of 5 total)

The topic ‘any way to have logo not get grainy when the fixed header shrinks’ is closed to new replies.