Increased page width in K2, now header image too narrow

  • solidgoldcreativity · Member ·

    I adjusted the page width using K2 theme from 780px to 850px. Now my header image is narrower than the page width. Have tried re-uploading the image, but no dice. How can I make my header image wider? Many thanks.

    The blog I need help with is: (visible only to logged in users)

  • unmallya · Member ·

    Can you post a link to your blog starting with http://

  • thesacredpath · Member ·

    If this is the blog you are talking about, http://solidgoldcreativity.wordpress.com/ , you have to create a new header image at 850px wide, upload it to the media library, get the URL of that image, and then put it into the CSS in the appropriate place. The header you currently have is only 780px wide. The custom header upload feature will not work after you change the CSS.

    #header {
background:#3371A3 url(URL of header) no-repeat scroll center center;
}
  • solidgoldcreativity · Member ·

    Great, Sacred Path. I’ll try that. Thanks so much x

  • thesacredpath · Member ·

    You’re welcome.

  • solidgoldcreativity · Member ·

    Hello again SP. OK, I’ve tried this but no success. I re-sized the image using Picasa so it’s now 850px wide and loaded it to the Media Library. I copied your syntax with the correct URL into the CSS editing window. I’ve tried a few diff combos — with and without brackets round the URL etc — but still no luck. Any clues? Many thanks.

  • thesacredpath · Member ·

    I don’t see the header section in your custom CSS with the new header image. Did you take it out?

    What is the URL of the new image?

  • solidgoldcreativity · Member ·

    Hello? How can you see it anyway? Do you have x-ray vision? I added the header command thingy in the CSS editing window.

    The URL of the new image is ..

    SG

  • thesacredpath · Member ·

    All I see in your custom CSS is this:

    #header {
}

    No declarations.

    Since it appears that the header image is declared outside of the CSS, try the following with the !important attribute. That should override the other image.

    #header {
background:#3371A3 url(http://solidgoldcreativity.files.wordpress.com/2009/11/seurat_sundayafternoonontheislandofgrandjatte2.jpg) no-repeat scroll center center !important;
}
  • thesacredpath · Member ·

    That image is not sized properly. The header image needs to be 850px wide by 200px high. Your image is 850px by 638px. You have to crop and resize it with an image editing program to the exact size of the header declaration.

  • solidgoldcreativity · Member ·

    It still doesn’t think it’s important :( Amazing how tricky all this stuff is. Wonder where the header image is being declared …

    Anyways, Sacred Path, thank you very much for your help. Will check out your blog anon. SG x

  • solidgoldcreativity · Member ·

    Our msgs crossed. Oh right, yeh, it’s not cropped. Oops, forgot that bit. Will give it one more shot x

  • thesacredpath · Member ·

    I just added the following to your custom CSS via Firebug and it works. I’m not sure what you are doing wrong.

    #header {
background:#3371A3 url(http://solidgoldcreativity.files.wordpress.com/2009/11/seurat_sundayafternoonontheislandofgrandjatte2.jpg) repeat-y scroll center center !important;
}

  • solidgoldcreativity · Member ·

    I don’t know what I’m doing wrong either … getting headache, feel like throwing laptop out the window. I changed the “no-repeat” command to “repeat-y” and still no dice. It couldn’t be cos the image file is now 850 x 199 px (ie, not 850 x 200) could it? Anyway, giving up now before I do something drastic.

    Where do you get the patience?????? Please, you can go to sleep now. Ta xx

  • devblog · Member · 
    background:#3371A3 url(http://solidgoldcreativity.files.wordpress.com/2009/11/seurat_sundayafternoonontheislandofgrandjatte2.jpg) repeat-y scroll center center !important;

    Just FYI, “center center” is wrong. There should be only one center value there, the other should be “top” or “bottom”

  • thesacredpath · Member ·

    OMG, the original CSS is wrong then. Actually it is the header CSS stuff put in by the custom header stuff I think.

    The original (with the image link) would be

    #header {
background:#3371A3 url(http://solidgoldcreativity.files.wordpress.com/2009/11/seurat_sundayafternoonontheislandofgrandjatte2.jpg) no-repeat scroll 0 0 !important;
}
  • thesacredpath · Member ·

    OK, you have a mistake in your background declaration syntax. There should not be a space between url and the first ( .

    Remove the #header stuff and paste the following in:

    #header {
background:#3371A3 url('http://solidgoldcreativity.files.wordpress.com/2009/11/seurat_sundayafternoonontheislandofgrandjatte2-e1258599882309.jpg') no-repeat scroll 0 0;
height:199px;
}

    Note that I changed the declared height to match your image at 199px. You can see the results on my test blog: http://flippintestblog.wordpress.com/ .

  • thesacredpath · Member ·

    Oh, and I would suggest increasing the width declared in #primary to 540px to keep from having so much white space between the content and the sidebar stuff.

  • solidgoldcreativity · Member ·

    Dear Sacred Path, thank you so much for your help with this, and your amazing tenacity and patience.

    I might try changing the #primary definition when I’ve had a wee rest ;)

    Thank you again. SGxxx

  • solidgoldcreativity · Member ·

    Thank you devblog for your suggestions and help. I really appreciate it. SGxx

1 2
  • The topic ‘Increased page width in K2, now header image too narrow’ is closed to new replies.