Change Header to an Image in Rowling Theme

• 

  johnhayes1 · Member · Aug 16, 2016 at 12:07 am

  • Copy link
  • Add topic to favorites

  Hey guys,

  I have very little experience with CSS, so I’m looking for a little bit of help in trying to change the plain black header into an image that I have in my media library for the blog. The Rowling theme doesn’t have an option for a “Header Image,” so I was wondering if it’s possible to get around that using CSS. Thanks!

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Aug 16, 2016 at 1:02 am

  • Copy link

  Hi there, I took a peek in your media library and didn’t see an image that looks like it would be a header image. Can you give us a link to the image you are wanting to use and we can see what we can do to make that happen for you?

• 

  johnhayes1 · Member · Aug 16, 2016 at 1:30 am

  • Copy link

  Here is the link to the image I’d like to use:

  

  Thanks!

• 

  thesacredpath · Member · Aug 16, 2016 at 6:03 am

  • Copy link

  Have a look at this. I had to move the image position down 15px otherwise you could not see the site description/tagline. To make it more visible, I added a black text shadow, increased the letter spacing a touch and also set it to bold.

  .header-wrapper {
      background-image: url("https://letmebfrankblog.files.wordpress.com/2016/08/pexels-photo-54567.jpeg");
      background-size: contain;
      background-position: center 15px;
  }
  .site-description {
      color: #fff;
      font-weight: bold;
      text-shadow: 2px 2px 1px #000;
      letter-spacing: 0.5px;
  }

• 

  johnhayes1 · Member · Aug 16, 2016 at 2:54 pm

  • Copy link

  Thank you so much for your help! The header looks great! For future reference, how did you know that the first line of CSS should be .header-wrapper and not .site-header or something else? Is that just something specific to this particular theme?

• 

  thesacredpath · Member · Aug 16, 2016 at 6:47 pm

  • Copy link

  Super, and you are welcome. I used the web inspector built into my browser to find the relevant CSS, or CSS class/id selectors. If you are not familiar with the web inspector in your browser, take a look at our support page on How to Find Your Theme’s CSS where you will find some brief screencasts to get you started with it. I find it an invaluable tool when working with CSS.

• 

  johnhayes1 · Member · Aug 16, 2016 at 10:16 pm

  • Copy link

  That’s good to know, I will definitely check it out. Thanks you!

• 

  thesacredpath · Member · Aug 17, 2016 at 1:28 am

  • Copy link

  You are welcome.