Header image in Pilcrow distorted after CSS edit

  • Unknown's avatar
    boostew · Member ·

    I thought I was being clever by adjusting the width of my overall blog. It worked great, but now it means the header image is distorted (CSS below):

    .two-column #container {
    max-width:900px;
    }

    #header img {
    border-bottom:1px solid #222;
    max-width:150%;
    width:900px;
    height:180px;
    }

    Now when I want to put the header image in, it won’t conform to these new dimensions. It states that it has to be 770 x 200 pixels as per the regular theme dimensions. (ie it’s stretching 770 x 200 to fit into a 900 x 180 space). I’ve taken the header image out entirely for the time being, if you’re looking at my blog.

    Is anyone able to help with this please?

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

  • Unknown's avatar
    timethief · Member ·

    I’m sorry but only Staff provide CSS editing support these days and they will not be available until Monday. http://en.support.wordpress.com/contact/

  • Unknown's avatar
    designsimply · Member ·

    @boostew, to do this, you’ll need to upload an image with the final dimensions first, such as 900 x 180 pixels, upload it to your media library, and copy the image URL.

    Then you can use this CSS to replace the built in theme image with the one you uploaded:

    #pic a img {
display: none;
}

#pic a {
background: url(YOUR_IMAGE_URL) no-repeat 0 45px;
border-bottom:1px solid #222;
display: block;
width:900px;
height:180px;
}

    Replace YOUR_IMAGE_URL with the image URL from the image you uploaded to your media library.

    @timethief, all of our users are welcome to post replies about CSS, not just Staff. :)

  • The topic ‘Header image in Pilcrow distorted after CSS edit’ is closed to new replies.