Increased page width in K2, now header image too narrow

  • Author
    Posts
  • #421459

    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 solidgoldcreativity.wordpress.com.

    #421596

    unmallya
    Member

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

    #421597

    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;
    }
    #421610

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

    #421617

    You’re welcome.

    #421618

    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.

    #421619

    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?

    #421621

    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

    #421623

    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;
    }
    #421625

    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.

    #421627

    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

    #421628

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

    #421629

    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;
    }

    #421636

    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

    #421639

    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”

    #421640

    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;
    }
    #421644

    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/ .

    #421646

    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.

    #421670

    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

    #421671

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

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