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
  • #107643 Resolve

    Sarah Jane Holden

    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


    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. :)


    Sarah Jane Holden

    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!



    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('') 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!


    Sarah Jane Holden

    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?





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


    Sarah Jane Holden

    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.



    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.


    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.