en WordPress.com Forums › CSS Customization

customize banner in The Morning After Theme

  • Author
    Posts
  • #817967

    pifomatic
    Member

    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.

    #818088

    designsimply
    Staff

    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.

    #818115

    pifomatic
    Member

    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!

    #818116

    designsimply
    Staff

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

    pifomatic
    Member

    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…

    #818162

    designsimply
    Staff

    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.

    #818176

    pifomatic
    Member

    It looks like it works! Many thanks!!!

    #818177

    designsimply
    Staff

    Yay! Cheers :)

  • Author
    Posts

The topic ‘customize banner in The Morning After Theme’ is closed to new replies.