Adding an image to the left hand side of title H1

  • bluebox54



    I want to set an image to the left of a page title H1 so it loads (the same icon) for all pages… I’ve heard people talk about adding code to page.php and/or the main style sheet…

    Has anyone got any suggestions or examples they could share?






    Maybe you could create a transparent .png file with your image on the far left… then float your post title slightly to the right. And bring everything together with some custom css.

    Something like this might work:

    .post-title, .post-title a {
    color: #1772AF;
    font: 22px arial;
    backgound:url("path to the image file");

    Kenneth John Odle


    You can also use the before css pseudo class:

    .post-title:before {image stuff here}

    Not tested; YMMV



    Hi Josh and Kenneth,

    Thank you both for your feedback. It’s an interesting addition I want to add to the theme but I accept it’s a little out there…

    I read this discussion on so I know its doable… either as a default image (like I’m planning) or using the featured image for variations per section…

    I’ve tried your suggestions above by adding to the style.css but I’m new to PHP & CSS and must be doing something wrong… can you guide me a little more?

    This is the image URL:

    Do I amend the css and if so can either of you outline exactly what I need to add… or do I also need to amend page.php as discussed in the above discussion on

    Many thanks for your help (sorry this is a curve ball from a newbie in the UK!)

    Chat soon




    Hi Josh and Kenneth,

    Can either of you or anyone help me with this a little more… I’m stumped.



    Okay, are you using a child theme? If not, shame on you. Check this thread:

    Then, upload your background image to your server.

    Now, add this to your css:

    .post-title:before {background-image:url("http://www.PATHTOYOURIMAGE");}

    Where PATHTOYOURIMAGE is the url to your image file.

    This is untested… but see what that does.




    (I’ve just read the child theme notes you’ve provided and will do this – thank you)

    I’ve tried .post-title:before and although the image still isn’t displaying I can see it’s trying to when I inspect the element in Firebug…

    can you have a look at this and see if I’ve just done sometyhing silly?

    I also tried background-position & Z-index if it was infact there but hidden… still no joy.

    Any ideas?



    Try this,

    .post-title, .post-title a:before {
    background: url("") no-repeat scroll 0 0 transparent;
    height: 41px;
    padding-left: 45px;

    It may give,




    Hi Prasanna, Great stuff thank you 🙂

    The only problem is it now shows on the child page links lower on the page as well… is there a way to stop that, other than turning off the child page links with-in a section?



    Add this too,

    .child-page .post-title {
    background: none;

Viewing 10 posts - 1 through 10 (of 11 total)

  • 1
  • 2
  • You must be logged in to reply to this topic.
Graphene Themes Forum