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

  • Author
    Posts
  • #1692791

    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.

    #1692973

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

    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!

    #1692975

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

    #1692977

    Here it is:

    #1692978

    And THANK YOU!

    #1692979

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

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

    #1692988

    You are welcome.

The topic ‘How do I increase the size of my header image in Motif?’ is closed to new replies.