Blurred header image

  • Anonymous


    Hi all,

    Before we upgraded Graphene to 1.2, we had a pretty sharp header image. Since the upgrade, the image looks blurrier than before – we’ve tried it on a number of different browsers to be sure, and it definitely looks less sharp than previously.

    I thought it might have been due to changes we made to a child theme, which reduced the visible size of the header slightly (from 198px to 113px), but the problem appears on the Graphene theme itself, as well.

    The size of the header uploaded is 900px by 198px, so that doesn’t seem as if it would be the problem. When the banner is uploaded through WordPress, it also looks blurry on the crop and publish page – but the image being uploaded is sharp when viewed locally.

    The website is here – it’s being prepared for launch shortly.

    Any thoughts?

    Thanks in advance!



    One other thing I’d like to ask. I found the coding that controls whether or not a border is adding to an image in the style.css:

    .entry-content img,

    .child-page img {

    border: 4px solid #e3e3e3;

    margin: 5px;


    Changing the border value within the style.css immediately updates all images on the site with this border. However, if I copy/paste the code above into the child stylesheet, and then edit the border, nothing happens on the site, the border thickness doesn’t change – I’ve not encountered this with any other code copy/pasted across to the child sheet so far.

    Is there a part of the coding I’m missing?

    Thanks in advance!



    The header size to upload must be 960x198px.

    Well, I use this code for borders in my Child style.css.

    I think its a general change. But remember to refresh

    the browser you are using.

    .entry-content img,.child-page img {
    border:1px solid #6E6E6E;




    Hi Kim,

    Thanks for your response! The coding you provided for the img border has done the job, thank you.

    I think we’ve solved the header problem in the mean time – I’ll double check and get back to you to confirm it.

    Thanks again!



    I really love the graphene theme but am really having a hard time swallowing the distorted header image file. I’ve dug around all over and can not seem to find any references to it anywhere but here. Has anyone found a solution to this problem. I’m sure everyone else has spent time and money on their logo’s, images etc….having to deal with it being all blurry is a no go for me. 🙁 Please help if you can.





    Here goes, You have this code on Your site:

    #header {
    background-color: #000000;
    background-position: center top;
    background-repeat: no-repeat;
    border-bottom: 1px solid #000000;
    border-top: 1px solid #000000;
    height: 198px;
    position: relative;
    width: 960px;

    Then You put this picture in the header: {
    background-image: url("");

    The picture is 965x200px & You wonder why its blurred 🙂

    Then again, Please upload 960x198px image Or Change Your Header Code size.

    Sorry, I Just lost track Of Times this been told here in Forum 🙂




    I also upload my header image using the same flow.jpg document as the original, 960 x 198 px. I have just added a logo, but I have the same problem. the image looks blurred.

    The image online is not blurred, but there is sojmething in the way it is incorporated to the header that blurred it. Can you please help?


    Syahir Hakim


    It doesn’t look blurred to me:



    Thank you for your answer. I still see the letters blurred. I will check if it might be my the settings of my browser. Your theme is really beautiful.



    Yes. it is my browser. In firefox it looks blurred. but in google chrome it looks ok. Thank you very much once again.

Viewing 10 posts - 1 through 10 (of 12 total)

  • 1
  • 2
  • You must be logged in to reply to this topic.