Full width header image gets blurry

  • I have made a child theme using twenty twelve and I would like to use a header image which is full size (= 960px).

    The problem is that when I upload the image and choose to use the actual size (which is 960px) the image gets kind of blurry (especially in IE) on the website.

    Here it is on the website:
    https://alfakommunikation.dk/wp/ (blurry)

    And this is the actual picture used:
    https://alfakommunikation.dk/wp/wp-content/uploads/2013/06/topny2.jpg (Not blurry here)

    The css says:

    img.header-image, {
	max-width: 100%;
	height: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */
}

    If I change max-width to ‘auto’ instead of ‘100%’ the image is not blurry – but then it doesn’t scale correctly on smaller screens.

    Does anybody know an explanation and a solution to this problem?

Viewing 15 replies - 1 through 15 (of 16 total)

  • You got this sorted, right ?

    It looks normal.

    Thread Starter webalfen

    (@webalfen)

    Not quite sorted – but it only seems to be a problem when viewing the website in Internet Explorer.

    Bush

    (@manishkumarruhil)

    There is a separate css file for IE in twentytwelve/css .

    Try editing following codes in it:
    img.size-full,
    img.size-large,
    img.header-image,
    img.wp-post-image,
    img[class*=”align”],
    img[class*=”wp-image-“],
    img[class*=”attachment-“] {
    width: auto; /* Prevent stretching of full-size and large-size images with height and width attributes in IE8 */
    }

    change its values to those you have written above and it should sort the the issue.

    The header image in original Twentytwelve theme doesn’t have this problem. Your site’s header image looks normal ( at leaste to me ) in FF and IE8 There is no need to do anything to theme’s CSS.

    Another different issue is that your child stylesheet should have @import to pull it all from parent as opposed to a copy over. As it is now, when you make changes directly to the copy over, it’s hard to debug.

    Thread Starter webalfen

    (@webalfen)

    Thank you.
    I have just tried the suggested solutions but it doesn’t change anything.
    But I can see that the ie.css file is for older IE versions (previous to IE9) and I see the problem in IE10.

    and I see the problem in IE10.

    Could you make sure that the Compatibility View is off.
    https://windows.microsoft.com/en-us/internet-explorer/use-compatibility-view#ie=ie-10

    Thread Starter webalfen

    (@webalfen)

    When Compatibility View is on I actually get a sharp image but a different styling.

    Bush

    (@manishkumarruhil)

    Many themes have different coding to support different browsers. find similar coding throughout the theme and change them in proportion to what you have changed.

    When Compatibility View is on I actually get a sharp image but a different styling.

    So there is no issue with header image styling in Twentytwelve.

    You could investigate the problem of “different styling” in IE10 by first make sure that it’s only occur on your child theme or to the parent theme too by temporary switching to Twentytwelve.

    Edit: Wait a min, when it’s on ? It must be off.

    Thread Starter webalfen

    (@webalfen)

    When it’s on the image is Sharp – when it’s off it’s blurry.

    Thread Starter webalfen

    (@webalfen)

    Now I have switched the theme to the original twente twelve and uploaded the header image. It gets blurry the same way(in IE10).

    Bush

    (@manishkumarruhil)

    It is showing very little blurry in IE. I think may be the issue is not with your theme/website but with IE and you should not worry about it.

    One possibly reason could be that IE may be loading image in low quality like many mobile browser do to speed up page loading.

    I was having the same prob with IE blurry header image. I noticed the header image resizing a few px away from original dimensions. I wondered how efficiently IE dealt with the new REM values, so I commented it out for the site class in my child theme. That seemed to fix the problem for me.

    .site {
    margin: 0 auto;
    max-width: 960px;
    /*max-width: 68.571428571rem;*/
    overflow: hidden;
    }

    Thread Starter webalfen

    (@webalfen)

    @ phil.dziner

    That actually seems to help here as well.

    Thanks a lot for that tip.

    Sorry to juump in, but my question is related.

    I’m very interested in extending my frontpage image all the way across and push down the the sidebar.

    @webalfen it looks like you have done exactly what I’m looking for. What child-theme have you used to achieve this wide image that pushes down the side bar (and how)?
    (l?kkert billede i?v. ??

    I have not yet installed a child-theme (i am completely new to WP and website creation) – and running on the pure twenty twelve, as you can see:

    Thanks in advance!

Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘Full width header image gets blurry’ is closed to new replies.