Forums

ClassOnTap

I am trying to add an image into the header area of my website http://www.classontap.com. The image is a circle that will be centered right where the "( CLASS ON TAP )" text is. How do I go about putting this image in the header? There is no easy way to do it through this theme. I must critique the CSS. Any help is greatly appreciated.

frijolito56

Questions

1: Can you give a link to the picture you are talking about?

2:What is the name of the theme?

ChrisP

@ClassOnTap, there's definitely a way to do it through the theme, see the codex:

http://codex.wordpress.org/Function_Reference/add_theme_support#Custom_Header

But, if you are looking for a way to just do it through css, you could set the site title h1's background as the logo, and give it a negative text indent to make the text disappear.

frijolito56

Do you want something like this?

ClassOnTap

Frijolito56 - Yes! That is exactly what I need! I want that image with the "( CLASS ON TAP )" omitted. How do I do that?

Thanks.

frijolito56

I added a

img

tag inside a

h1

tag with a vcard author class in it.

Here is how it looks like

          <h1 class="vcard author">
          <a href="http://classontap.com/" title="Home" class="fn">( CLASS ON TAP )
       </a>
       <img src="http://css- tricks.com/forums/uploads/userpics/043/pBYM7T3HM53FL.jpg">
         </h1>

Here is how I edited I highlighted what I added.

ClassOnTap

How would I put this in the CSS? Here is the current h1 code:

h1{ margin: 10px 0 20px; font-size: 3.3em; font-weight: normal; text-transform: uppercase; letter-spacing: .05em; word-spacing: .2em; }

h1 a:link, h1 a:visited{ color: #000; }

h1 a:active{ color: #000; text-decoration: underline; }

This is the image I want to use: http://classontap.com/wp-content/uploads/2013/01/Class_Logo_A.jpg

This is very helpful. Thanks again!

ChrisP

@ClassOnTap,

h1.author.vcard {
  width: 400px;
  height: 400px;
  text-indent: -99999px;
  background-image: url('http://classontap.com/wp-content/uploads/2013/01/Class_Logo_A.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  margin: 0 auto;
}

Side Note: Background-size isn't supported in IE8, so you'd have to find a work around for that..

you could also use background-size: 100%; or some variation, but contain ensures that the image will always be "contained" in that size..

I also just used 400px generically, obviously that can be changed to your preference.

ClassOnTap

Perfect! Now, how do I make this thing a link so my viewers can click on the image and revert back to the home page?

ChrisP

h1.author.vcard a {
  display: block;
  width: 100%;
  height: 100%;
}

ClassOnTap

Thank you so much. I am not saying this rhetorically, that is exactly what I wanted!

ChrisP

@ClassOnTap, glad I could help :)

treehouse : what would you like to learn today?

Forums

Changing Header Image