Editing my CSS to change the header text and image.

• 

  subvertingmobility · Member · Apr 18, 2013 at 9:10 pm

  • Copy link
  • Add topic to favorites

  I am trying to change my CSS so that I can insert an image in the top header text area above my Menu. I don’t want to use the header text style that is available with my theme.

  When I insert the only CSS I know in order to place a masthead image in it brings all my posts below up directly underneath the image which I inserted. This is the CSS text I’m using…

  #masthead {
  position: relative;
  top: 15px;
  background: url(‘http://arquetopiafoundationfordevelopment.files.wordpress.com/2013/04/arquetopia_header_logo.jpg’);
  width: 960px;
  height: 40px;
  margin: 0px;
  margin-top: 0px;
  }

  How can I control the position of my pages below the masthead? I also don’t want the logo image to repeat down the background of the page. I just want it to sit in the area exactly above the menu which is approx 960px x 40 or 50px.

  The blog I need help with is arquetopiafoundationfordevelopment.wordpress.com.

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

• 

  thesacredpath · Member · Apr 18, 2013 at 9:26 pm

  • Copy link

  Give this a try and see what you think.

  .site-header h1 {
  background: url("http://arquetopiafoundationfordevelopment.files.wordpress.com/2013/04/arquetopia_header_logo.jpg") no-repeat scroll 0 0 transparent;
  height: 90px;
  width: 960px;
  }
  
  .site-header h1 a {
  display: block;
  line-height: 90px;
  text-indent: -9999px;
  }

• 

  subvertingmobility · Member · Apr 18, 2013 at 9:45 pm

  • Copy link

  Thank you… Perfect… I knew it would be simple, but I’m very new to CSS.
  Thanks again!

• 

  thesacredpath · Member · Apr 18, 2013 at 9:51 pm

  • Copy link

  You are welcome.