Grow your CSS skills. Land your dream job.

Changing Header Image

  • # January 24, 2013 at 10:32 pm

    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.

    # January 24, 2013 at 11:09 pm

    Questions

    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

    @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.

    # 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?

    Thanks.

    # January 25, 2013 at 8:01 am

    I added a

    img

    tag inside a

    h1

    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:

    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!

    # January 25, 2013 at 12:39 pm

    @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.

    # 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

    h1.author.vcard a {
    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

    @ClassOnTap, glad I could help :)

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".