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

• 

  justinrweinberg · Member · Mar 11, 2014 at 8:09 pm

  • Copy link
  • Add topic to favorites

  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: (visible only to logged in users)

• 

  thesacredpath · Member · Mar 12, 2014 at 3:34 am

  • Copy link

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

• 

  justinrweinberg · Member · Mar 12, 2014 at 3:55 am

  • Copy link

  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!

• 

  thesacredpath · Member · Mar 12, 2014 at 3:59 am

  • Copy link

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

• 

  justinrweinberg · Member · Mar 12, 2014 at 4:06 am

  • Copy link

  Here it is:
  

• 

  justinrweinberg · Member · Mar 12, 2014 at 4:06 am

  • Copy link

  And THANK YOU!

• 

  thesacredpath · Member · Mar 12, 2014 at 4:11 am

  • Copy link

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

• 

  justinrweinberg · Member · Mar 12, 2014 at 4:14 am

  • Copy link

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

• 

  thesacredpath · Member · Mar 12, 2014 at 4:16 pm

  • Copy link

  You are welcome.