Complete Guide to Using Thesis 2 for WordPress. Click Here.

≡ Menu

Step 42: Upload a header image in Thesis 2

Thrifty Zizel Header Image

Our site is progressing fast now.  It’s about time we dress up the header.  After all, the header is a primary focus point of a website.  A header image or logo is often used for branding a site.  So in this step we’ll upload a header image in Thesis 2 using only CSS.  In the past this step might require custom PHP.  Not with Thesis 2.

I will assume you already have an image for use.  In my case I’m using a 150×150 pixel image file with a transparent background.  I’m also going to continue to use the Site Title and Site Tagline that is native to WordPress.

From the WordPress Dashboard navigate to the Thesis 2 Imges page.

Thesis 2 Images Page

Click on the “Choose File” button.  Navigate to the folder on your computer where you stored your header image.  Click on the header image file then click “Open”.

Thesis 2 Select Image to Upload

Click the green “Add Image” button.

Thesis 2 Add Image

Your file will now appear in the Thesis 2 Images library.  Note the “CSS Reference” column.  You will want to copy the “images/your_image.png” for future reference.  Also note the width and height.  Another thing to take note of with Thesis 2 is when you are working with images in your CSS, you will upload them here and not in the standard WordPress Media Library.

Thesis 2 Image URL

Next, go to the Thesis 2 CSS page.

Thesis 2 CSS Page

Look for the “Header” Package and click on it.

Thesis 2 Header CSS

The Header CSS will open in a pop-up.  Scroll down to the “Background” and click on the black arrow.  In the “Background Image” line paste the image location that we copied from above.

Thesis 2 Header CSS Background Image

Scroll down and select “no repeat” in the “Background Repeat” section.

Thesis 2 Background Image norepeat

Now scroll down to “Padding”.  My image is 150x150px.  If we don’t add some padding, the Site Title and Site Tagline elements will overwrite our image.  I chose 160px to put 10px between my image and the text.  You can experiment to see what works best for you.  If you have any Margin set in the Margin section, remove those values as well.

Thesis Header Padding

Click “Additional CSS”.  I added a line to make the height of the header match the height of my image.  Click the green “Save” button as we are done editing the Header CSS.

Thesis 2 Header Additional CSS

We will now edit the “Site Title” CSS.  Click on the “Site Title” CSS Package.

Thesis 2 Site Title and Tagline

For my site I’m going to change the Site Title Text Color to white for contrast against my header background color.

Thesis 2 Site Title Color

Next I’m going to add some Top Padding to my Site Title to bring it down from the top of the Header.  You will need to experiment here to see what looks best on your site.

Thesis 2 Site Title Padding

For the final Site Title step I’m going to change the color of the “a” HTML tag.  Since the Site Title is a link, just changing the Font Color won’t work.  This reference will make sure the title is displayed as white.  I am leaving the default “a:hover” color because I want site visitors to notice that the title is a link when they hover over it.  Now click the green “Save” button.

Thesis 2 Site Title Additional CSS

We are done with the Site Title.  We’ll work on the Site Tagline as our final step in this process.   Click on the “Site Tagline” CSS Package.

Thesis 2 Site Title and Tagline

I’m changing the Text Color to white.  Click the green “Save” button.

Thesis 2 Site Tagline Font Color

Don’t forget to click the green “Save CSS” button.

Thesis 2 Save CSS

We’re finished adding a header background image using Thesis 2 CSS.

About the author: I’m a techie, a gadget geek, a former programmer, and all-around technology nut. Currently I’m a business analyst for a technology company. I love what technology can do for us. I love smartphones and apps for everything. Building sites with Thesis 2.0 and WordPress help me to reconnect with the feeling of building something tangible.

I’m on: Google+ and Twitter

{ 10 comments… add one }
  • Marylou Tyler June 4, 2013, 9:33 PM

    Thank you for providing this tutorial. One question: is it possible to make the image a link that always navigates me back to the home page? Or, do I need to somehow combine the title (shifting it left off the screen?) with the image so the entire area is clickable?

  • Doug Macklem June 4, 2013, 9:50 PM

    Marylou: I don’t think you can make a CSS background image “clickable” directly. I have considered adding a step where I use an image as the header instead of a CSS background image. This can be made a link to the home page.

  • Jenna June 28, 2013, 2:34 PM

    I uploaded a header image to my site, but it is off center. Is there a way I can center it with the padding? What do you suggest? Here’s my site: http://69.195.124.109/~rainonat/

    Thank you!

  • Sumit July 10, 2013, 12:54 PM

    thanks man… you made it very simple

  • Doug Macklem July 21, 2013, 7:53 PM

    Thanks! I’m glad I could help others. I long for the day when build websites is even easier.

  • Doug Macklem July 21, 2013, 7:57 PM

    Sorry for the delayed response, been on vac. I checked your site and it looks good to me. I guess you figured it out.

  • Joanna October 26, 2013, 10:05 AM

    Started a new Thesis 2.1 site. Thanks for all the info here it really helps. I was wondering how to put a slider of pictures in the header on 2.1 It only lets me upload a picture so I guess I have to put a code in. Any ide how to do this? I want my pictures to be the same size as the current one on http://www.sparkedwithadvocare.com
    Thanks
    Joanna

  • Doug Macklem October 26, 2013, 2:12 PM

    I haven’t done this but I imagine you could use a plug-in like NextGEN or some other carousel style slideshow plug-in.

  • Scorpion March 7, 2015, 1:07 AM

    Anyone help??? This is killing me.

    I’ve made the header change and my site isn’t showing the change. I’ve cleared the cache, disabled my cache plugin… I don’t know what’s wrong. I’ve searched high and low on the net and can’t find a solution.

    I’d appreciate any help VERY MUCH!

    Here’s the site… the header is showing a fire background… it should be showing a company logo and invitation to call.

    Thank you in advance for any assistance.

    Cameron

  • Doug Macklem March 7, 2015, 7:49 AM

    I can’t tell from the site what is going wrong. I use the Chrome browser and it allows you to right-click and “Inspect element” to see the code behind the site. For my site, you can see a header image inside the “header” HTML tag. For your site, I can find no such thing. Without signing into your site, I can’t be sure what is happening. Let us know what you find.

Leave a Comment