Home › Forums › Automattic › On a Whim › Insert large image into header – For specialized font
-
AuthorPosts
-
Sarah Jane HoldenMemberI 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.comJuly 30, 2013 at 12:57 am #137470
MichelleHi 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. :)
July 30, 2013 at 7:28 pm #137510
Sarah Jane HoldenMemberI’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!
July 30, 2013 at 10:15 pm #137521
MichelleHi 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!
July 31, 2013 at 10:32 pm #137600
Sarah Jane HoldenMemberHi 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.
August 2, 2013 at 3:04 am #137687
MichelleHi there! I addressed this issue in the other thread.
August 2, 2013 at 6:59 pm #137717
Sarah Jane HoldenMemberOK, 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.
August 6, 2013 at 5:50 am #137853
MichelleHi 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.
August 22, 2013 at 5:18 pm #138770
Caroline MooreHowdy! 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!
-
AuthorPosts
The topic ‘Insert large image into header – For specialized font’ is closed to new replies.