Need help? Check out our Support site, then


How do I increase the size of my header image in Motif?

  1. justinrweinberg
    Member

    My blog is http://dailynous.com/ . I would like to increase the size of the banner image at the top. I am using the Motif theme. When I open up the CSS stylesheet editor I am greeted with a welcome message and I cannot figure out where to add any code to increase the banner size or what such code would be. I am new at this, so sorry if this is a stupid question.

    The blog I need help with is dailynous.com.

  2. Hi, you can use the following CSS to add a full width header to Motif. Since you have not stated what size you want, I have arbitrarily set a height of 200px, but it can be any height you desire, you just need to change the max height in the second rule below to match the height of your image. The image would need to be 940px wide. Upload the image to your media library, get the URL of that image and replace URL_OF_IMAGE in the first rule below with that image and then go to Appearance > Customize > CSS, delete all the informational text and paste in the following CSS.

    .site-image {
        background: url("URL_OF_IMAGE") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    }
    .site-image img {
        visibility: hidden;
        width: 100%;
        max-height: 200px;
    }
    .header-image-link {
        display: block;
    }
  3. justinrweinberg
    Member

    Thank you very much! I tried your suggestion and it worked, sort of. I was able to enlarge the banner so that it looked good on a normal computer monitor, but on a mobile device it was way too large. Is there a way to scale the size of the banner so it is appropriate for the device it is being viewed on? Thanks again!

  4. Can you post a link to the image you are wanting to use here so I can work with it?

  5. justinrweinberg
    Member

  6. justinrweinberg
    Member

    And THANK YOU!

  7. Thanks for the link. I've made some adjustments to the code I gave based on your image. Use the following and see what you think. It seems to resize fine for smaller screens.

    .site-image {
        background: url("http://dailynous.files.wordpress.com/2014/03/dailynous-blog-banner-932x271.jpg") no-repeat scroll center top / contain rgba(0, 0, 0, 0);
    }
    .site-image img {
        max-height: 271px;
        visibility: hidden;
        width: 100%;
    }
    .header-image-link {
        display: block;
    }
  8. justinrweinberg
    Member

    That is awesome! You are a wonderful help. Thank you very much.

  9. You are welcome.

Topic Closed

This topic has been closed to new replies.

About this Topic