How to use CSS to change header

Home Forums Automattic Vintage Kitchen How to use CSS to change header

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

    sdkitchenista

    Hello, I have a Custom Design Upgrade, but I can’t figure out how to change the gingham header image with CSS. I have an image I want to replace the current gingham design with, but I don’t know how to replace what’s there with my new header image.

    I’ve tried adding this CSS within Manage Themes > CSS, but it didn’t do anything:

    #header {
    background: url(‘http://i.imgur.com/sg2t9rW.png’) top center no-repeat;
    height: 230px;
    margin-bottom: -7px;
    width: 100%;
    }

    I’ve seen some people mention going into the stylesheet to see all the theme’s current CSS and edit it, but I don’t know how to find that. All I want to do is replace the header background image, how can I go about doing that?

    The blog I need help with is sdkitchenista.com
    #135944

    philiparthurmoore

    Hi there. I suspect this may have something to do with hotlinking from imgur. To make sure that this is not an issue, first download the image here and upload it into your Media Library. Then use the link to your file (uploaded to your blog) in your CSS editor and let us know if that helps. If it doesn’t, we’ll try to sort out the proper CSS to use. Cheers.

    #135947

    sdkitchenista

    Thank you, Philip! I tried what you said, but it didn’t seem to change anything. After uploading the image to my media library, the new CSS I used was:

    #header {

    background: url(‘http://sdkitchenista.files.wordpress.com/2013/06/kitchenista_header.png’) top center no-repeat;

    height: 230px;

    margin-bottom: -7px;

    width: 100%;

    }

    Any other suggestions?

    #136045

    philiparthurmoore

    Hi there. So it turns out that #header isn’t really being used anywhere. Have you tried using the ID #masthead instead? What exactly are you trying to change? This seems to work well for me:

    #masthead {
    background: url('http://sdkitchenista.files.wordpress.com/2013/06/kitchenista_header.png') top center repeat-x;
    width: 100%;
    }

    #136153

    sdkitchenista

    Ah, thank you so much! That worked! Thank you for all your help 8)

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

The topic ‘How to use CSS to change header’ is closed to new replies.