Background Image link

• 

  nich0lasmoore · Member · Mar 20, 2015 at 8:44 pm

  • Copy link
  • Add topic to favorites

  How can I make the background image at the top of my website linkable back to my website, without adding a box around it?

  #logo {
  background: url(‘https://nich0lasmoore.files.wordpress.com/2015/03/untitled2.png’) no-repeat scroll top left transparent;
  height: 165px;
  width: 750px;
  vertical-align: bottom;
  padding-top: 1px;
  }

  Thank you!

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

• 

  thesacredpath · Member · Mar 23, 2015 at 2:19 pm

  • Copy link

  Hi, first off go to Appearance > Customize > Site Title & Tagline and select Display Header text and then remove this from your CSS

  #site-title, #site-description {
      padding-bottom: 120px;
      padding-left: 300px;
  }

  and then add the following CSS

  #site-title a {
      display: block;
      line-height: 150px;
      width: 700px;
      background: red;
  }
  #wrap a:hover, #site-description, #site-title a {
      color: rgba(0, 0, 0, 0) !important;
  }

• 

  nich0lasmoore · Member · Mar 23, 2015 at 5:32 pm

  • Copy link

  As always thanks for the reply! When I enter the CSS I get a red box over where the image use to be. Maybe I am doing something wrong. Here is what I have:

  #logo {
  background: url(‘https://nich0lasmoore.files.wordpress.com/2015/03/untitled2.png’) no-repeat scroll top left transparent;
  height: 165px;
  width: 750px;
  vertical-align: bottom;
  padding-top: 1px;

  }
  #site-title a {
  display: block;
  line-height: 150px;
  width: 700px;
  background: red;
  }
  #wrap a:hover, #site-description, #site-title a {
  color: rgba(0, 0, 0, 0) !important;
  }

  }
  #header {
  position: relative;
  height: 167px;
  margin-top: 9px;
  }

  hr.sepinside {
  display: none;
  position: absolute;
  }

  #main-nav {
  position: absolute;
  bottom: -11px;
  }

  #footer. #footer a, #footer .sep {
  background-color: #e74303 !important;
  color: #00b4ff !important;
  position: relative;
  }

  #footer, #footer a, #footer .sep {
  background-color: #F8B908 !important;
  color: #ffffff !important;
  position: relative;
  height: 255px;
  margin-top: -50px;
  }

  div#footer-column, div#footer {
  border-top: none;
  }

  div#footer {
  position: relative;
  }

  #footer ul > li {
  position: absolute;
  left: 1px;
  bottom: 115px;
  width: 288px;
  }

  div.column-title {
  min-height: 5px !important;
  }

  h1.title-header {
  margin: 0 !important;
  position: relative;
  bottom: -3px;
  }

  div#text-22 {
  position: absolute;
  left: 700px;
  bottom: 1200px;
  position: absolute;
  }

  #blog-stats-8 {
  position: absolute;
  left: 408px;
  bottom: 100px;
  }

  div#text-48 {
  position: absolute;
  left: 367px;
  bottom: 2px;
  position: absolute;
  }

  .single .navigation {
  display: none;
  }

  #footer .copy {
  position: absolute;
  right: 0;
  left: 671px;
  bottom: 5px;
  margin-bottom: 0;
  }

  div#text-50 {
  position: absolute;
  left: 8px;
  bottom: 6px;
  position: absolute;
  }

  widget ul.menu,
  .widget ul.menu li {
  border: 0;
  }

  #slider-wrap {
  border: none;
  display: none;
  pointer-events: none;
  }

  .home #slider-wrap {
  display: block;
  }

  #text-67 {
  position: absolute;
  top: 50px;
  right: 300px;
  }

• 

  nich0lasmoore · Member · Mar 23, 2015 at 7:10 pm

  • Copy link

  awesome I did not even read the CSS. I see you had the background image at red and I removed it. Now I am good! Thank you kind sir.

• 

  thesacredpath · Member · Mar 23, 2015 at 10:37 pm

  • Copy link

  Heh, you are welcome and I’m sorry. I had added a red background to things so I could make sure and get it sized correctly and forgot to take it out. Glad you got it fixed. :)