How to add a picture above the blog name

  • Unknown's avatar
    llanosoul · Member ·

    Hi CSS pros,

    I’ve just recently started a blog with my friend and since neither of us are too computer savvy, we were wondering if anyone out there could give us a few pointers with adding a picture above the blog name.

    We were thinking of adding the following picture:
    http://s2.hubimg.com/u/2565289_f260.jpg
    Right above the title “Go after her”.

    How would we do this? Especially since the left bar of the blog is stationary as you scroll down to read the blog post.

    Thanks all in advance!! Any pointers are appreciated…

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Add the following to your CSS. You’re probably going to want to make the image smaller and then play with the left and top positioning numbers (90px and -10px). The 90px for the left position works well, but once you downsize the image, the -10px might have to be brought back to be played with. 

    body, .delicious-desc {
background:url("http://s2.hubimg.com/u/2565289_f260.jpg") no-repeat scroll 90px -10px transparent;
}
  • Unknown's avatar
    hallluke · Member ·

    If you want it to appear fixed on the page like the title and navigation links try the code below. It will also scale (fairly) well when people resize their text. It may cause problems if people resize it really small due to the relative widths of the elements but that isn’t something that should cause real problems.

    #main-nav {background:url("http://s2.hubimg.com/u/2565289_f260.jpg") no-repeat scroll -60px 0 transparent; width:170px; margin-top:0; padding-top:250px;}

  • Unknown's avatar
    sheraldaine · Member ·

    Hi CSS Pros,

    All the help has been really good! Thanks for everything. I’ve now managed to stumble across another block in the road.

    I tried changing the linked picture from the previously mentioned one to this one:
    http://goafterher.files.wordpress.com/2010/09/edit-banksy1.jpg

    By changing the link. I’ve managed to mess up the picture and turn it into something big and strange. Obviously trying to change the numbers a little didn’t work. :( Could I bother you all for help again?

    Thanks yet again :)

  • Unknown's avatar
    hallluke · Member ·

    Your best bet is probably to crop the image using photoshop or some equivalent to get rid of the extra white edges and then re-upload it. Alternatively the code below should nudge it around until it fits above your title:

    #main-nav {background:url("http://goafterher.files.wordpress.com/2010/09/edit-banksy1.jpg") no-repeat scroll -10px -170px transparent; margin-top:0; padding-top:250px; width:230px; z-index:-1;}

  • Unknown's avatar
    sheraldaine · Member ·

    Halluke, you’re amazing! Thank you so much!! You’ve just saved my butt from the other irate author :)

  • The topic ‘How to add a picture above the blog name’ is closed to new replies.