replacing header text with logo and keeping header image

  • Author
  • #1353131


    I need to replace header text (currently removed) in my blog with a .jpg logo and then below have a header image. What would be the way to do that? (I have upgraded)

    The blog I need help with is


    You can use a CSS image replacement technique to do that. Here is an example for the Coraline theme:

    #site-title a {
    	text-align: left;
    	text-indent: -9999px;
    	background: url( no-repeat;
    	display: block;
    	width: 176px;
    	height: 145px;
    	margin: 0 auto;

    Replace the url() value with your own image link and adjust the width and height values.

    I tested using the demo site at so if your settings and custom CSS are different, you may need to adjust the example.


    Thanks much for the reply – I am a novice though and do not know where this should be done – need the path to get there, seem like I am getting better but still not sure where things are of this nature. The logo will have to be in the center of the page, just in case this matters. Thanks much for your patience!:-)


    :) To add new CSS, go to Appearance → Themes → Customize → CSS panel. In order to make custom CSS visible to the world, you must also purchase the Custom Design upgrade—but anyone can try it out in the CSS editor before purchasing.


    It worked!! You ARE a happiness engineer!:-) Two questions: a) there is too much white space above the logo – how do I manage that? b) the mobile version is messed up – the logo goes way wider than the mobile blog page..what to do? Thanks so much for help!


    Hi there,

    a) The following CSS might solve the white space above your logo. Can you give it a try? :)

    #masthead {
        padding-top: 0;

    b) The width of your logo was set to 1990px. If you notice, in the desktop version you also get a horizontal scroll bar. This might solve the issue:

    #site-title a {
        width: 100%;

The topic ‘replacing header text with logo and keeping header image’ is closed to new replies.