The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Changing Header Image

  • # January 24, 2013 at 10:32 pm

    I am trying to add an image into the header area of my website 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.

    # January 24, 2013 at 11:09 pm


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

    2:What is the name of the theme?

    # January 24, 2013 at 11:19 pm

    This reply has been reported for inappropriate content.

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

    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.

    # January 24, 2013 at 11:28 pm

    Do you want something like this?

    # January 25, 2013 at 12:16 am

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


    # January 25, 2013 at 8:01 am

    I added a


    tag inside a


    tag with a vcard author class in it.

    Here is how it looks like

    ( CLASS ON TAP )

    Here is how I edited I highlighted what I added.

    # January 25, 2013 at 12:22 pm

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

    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:

    This is very helpful. Thanks again!

    # January 25, 2013 at 12:39 pm

    This reply has been reported for inappropriate content.

    @ClassOnTap, {
    width: 400px;
    height: 400px;
    text-indent: -99999px;
    background-image: url(‘’);
    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.

    # January 25, 2013 at 12:59 pm

    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?

    # January 25, 2013 at 1:04 pm

    This reply has been reported for inappropriate content. a {<br />

    display: block;
    width: 100%;
    height: 100%;

    # January 25, 2013 at 1:19 pm

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

    # January 25, 2013 at 1:24 pm

    This reply has been reported for inappropriate content.

    @ClassOnTap, glad I could help :)

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed