Insert large image into header – For specialized font

Home Forums Automattic On a Whim Insert large image into header – For specialized font

Tagged: , ,

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #107643 Resolve

    Sarah Jane Holden
    Member

    I have a specialized font that I would like to use for the header (title of the website). I can capture an image of the header I would like utilizing a different tool, but am unsure how to bring the image in, to replace the text header with this image.

    Any help is greatly appreciated, as I am a complete novice in dealing with CSS, etc.

    The blog I need help with is babbleonbaby.wordpress.com
    #137470

    Michelle

    Hi there,

    We can use CSS to set the image as the background image for the header area, and to hide the original header text. Can you upload the image you want to use into your Media Library and reply back here once you have done that? Then I will provide you with the CSS code to use. :)

    #137510

    Sarah Jane Holden
    Member

    I’ve uploaded the image. If you can give me the code, that would be great. Also, just need to make sure I know how to undo this in the event I don’t like the way it looks. Thanks so much for your help!

    #137521

    Michelle

    Hi there,

    Here’s the CSS to add the image as a background in your header area. I left the logo and description alone (wasn’t sure if you wanted to hide those as well).

    .site-title a {
    background: url('http://babbleonbaby.files.wordpress.com/2013/07/blog-header1.png') no-repeat;
    background-size: contain;
    display: inline-block;
    text-indent: -9999px;
    height: 200px;
    width: 648px;
    }

    If you want to undo this, all you have to do is delete the CSS. :)

    Let me know how this works for you or if you want further tweaks!

    #137600

    Sarah Jane Holden
    Member

    Hi thanks for this info.

    Not sure if you can help me further with an issue going on…now when I open up custom design tools, the page to input CSS code never loads. Is there an issue going on with this theme and the customization tools or is this just me?

    :)

    Thanks.

    #137687

    Michelle

    Hi there! I addressed this issue in the other thread.

    #137717

    Sarah Jane Holden
    Member

    OK, thanks for helping with this glitch. I was able to load the image as the header, but unfortunately when viewing it on a mobile device, it is not loading properly (only half the screen shows the text-the other half has the background). Can you give me a suggestion on how to fix this?

    If I can’t work out this glitch, I may have to switch themes.

    #137853

    Michelle

    Hi there,

    I see that you have switched to the Forefront theme. Are you still interested in further assistance with this issue? If not, I will close this thread. Cheers.

    #138770

    Caroline Moore

    Howdy! Since you’ve recently switched to Forefront, I’m going to close this thread and mark it as resolved, but please don’t hesitate to create a new topic should you have additional questions. Cheers!

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

The topic ‘Insert large image into header – For specialized font’ is closed to new replies.