Need help? Check out our Support site, then


customize banner in The Morning After Theme

  1. I was able to change top banner height (from 70px to 300px), but the only thing I get is an image 70px croped image repeated 4 1/3 times.
    How can I change it for a full 960 x 300 px image?

    The blog I need help with is stephaniestamant.com.

  2. Most commonly, something like this is used to replace a header image background with something more customized using CSS:

    YOUR_SELECTOR {
    background: url('YOUR_IMAGE_URL') no-repeat;
    height: 300px;
    }

    Replace YOUR_SELECTOR with the selector needed for your theme. Replace YOUR_IMAGE_URL with an image URL, most likely one you've uploaded to your media library.

    If you send us a link to your site, then we could see what you've done so far and give you more specific advice.

  3. Thank your for your answer!

    I think there is a code somewhere which crop the image idenpendently of height size.

    See: stephaniestamant.com

    Banner height is 300px, but the image (from my media library) is cropped to 70 px. But no more repeat!

  4. This is your current cropped image from the Appearance → Header page: http://stephaniestamant.files.wordpress.com/2012/02/cropped-enteteblogue4.jpg

    You should create a new image separately, on your computer, and then upload it to your media library and copy the URL. See http://en.support.wordpress.com/images/

    Once that is done, add this CSS and replace YOUR_IMAGE_URL with the image URL you uploaded to your media library:

    #topbanner {
    background: url(YOUR_IMAGE_URL) no-repeat;
    }
  5. That's what I have done... The image selected from my media library is this one:
    http://stephaniestamant.files.wordpress.com/2012/02/enteteblogue2.jpg
    Not the cropped one...

  6. The width of that image isn't wide enough to fit your theme. Your theme is 960px and the http://stephaniestamant.files.wordpress.com/2012/02/enteteblogue2.jpg image is 694px.

    But here's how it would look using the width and height of the image you linked:

    #topbanner {
    background: url(http://stephaniestamant.files.wordpress.com/2012/02/enteteblogue2.jpg) no-repeat !important;
    width: 692px;
    height: 392px;
    }

    Note: I had to add !important to the rule which I didn't realize before when I posted.

  7. It looks like it works! Many thanks!!!

  8. Yay! Cheers :)

Topic Closed

This topic has been closed to new replies.

About this Topic