Image on top of web page

• 

  xcskidor · Member · Oct 20, 2011 at 9:00 pm

  • Copy link
  • Add topic to favorites

  I need help to enter CSS code to get my logo to appear on the top of my web page instead of (or next to) the title name of the page. I have purchased the custom design package. I have the Twenty ten theme. I am not good at CSS code and would appreciate to get this help.

  Web page: http://www.xcskidor.se (as you see, the top left corner states “XC Skidor” in writing. Here I would like to have my logo. Then, I can accept to have the “XC Skidor” in writing in the middle or something (i.e. if I need it, it seems to play a role on web searches, visibility, etc.).

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

• 

  thesacredpath · Member · Oct 21, 2011 at 8:57 am

  • Copy link

  Upload the logo file to your media library, get the URL of that image after uploading and then post it here and we can help you with that.

• 

  xcskidor · Member · Oct 21, 2011 at 6:02 pm

  • Copy link

  OK, thesacredpath.

  Here the URL: http://xcskidor.files.wordpress.com/2011/10/xcskidor_logo_red1.png

  I appreciate your assistance!

• 

  thesacredpath · Member · Oct 21, 2011 at 7:58 pm

  • Copy link

  Because your logo is very squarish, I would recommend adding it in addition to the text title, but that is your choice really.

  What you are going to have to do is to resize your logo down to a height of less than 100px, and I would actually suggest 90px tall and then upload that one for us to use.

• 

  xcskidor · Member · Oct 21, 2011 at 8:53 pm

  • Copy link

  OK, is this size what you mean? It seems very small.

  

  Is it possible to get both alternatives (i.e. adding it in and not)?

• 

  thesacredpath · Member · Oct 21, 2011 at 9:27 pm

  • Copy link

  The problem is that with such a square logo, using it without any text or other graphics beside it looks strange due to all the white space it leaves. But, with the logo containing the name, having the name also in text looks strange too.

  This is it without the text.

  #site-title {
  background: url("http://xcskidor.files.wordpress.com/2011/10/xcskidor_logo_red-homepage1.png") no-repeat scroll 0 0 transparent;
  height: 94px;
  }
  
  This would be it with the title.
  
  #site-title a {
  margin-left: -9999px;
  }

  #site-title {
  background: url("http://xcskidor.files.wordpress.com/2011/10/xcskidor_logo_red-homepage1.png") no-repeat scroll 0 0 transparent;
  height: 94px;
  }
  
  #site-title a {
  margin-left: 150px;
  position: relative;
  top: -9px;
  }

• 

  xcskidor · Member · Oct 21, 2011 at 9:56 pm

  • Copy link

  Thank you so much!

  This is a great start. We can evaluate after a while.

  I appreciate your help!

• 

  thesacredpath · Member · Oct 22, 2011 at 1:21 am

  • Copy link

  You are welcome