Issues with links and jpeg

Issues with links and jpeg
0

#1

I have two issues that I have been working on all day and cannot figure out. I am trying to add a picture in the top left corner of my nav bar above the home link but I can not get it to work, the other issue is I have a lighter color over my words used for links, and I can not figure out how to remove it. Any would be appreciated!

css

body,h3, p{
  background:url('../img/city.jpg')no-repeat ;
  background-position: center 35%;
  font-family: "Montserrat", sans-serif
}
.fa{
  color:black;
}
.side-bar{
  position: fixed;
  text-align: center;
  padding: 10px;
  top:0px; left:0px; bottom: 0px;
  width: 120px;
  background-color: #222;
  transition: width ease .5s;
}
.side-bar a{
  color:darkslategray;
  text-decoration: none;
  transition:
  color ease .35s,
  border-bottom-color ease .35s;
}
.side-bar a:hover{
  color: #000;
  font-weight: bold;
  text-decoration:underline;
}

HTML:

<nav class="side-bar">
      <img src="../img/sale.jpeg" style="width:100%">
      <a href="#home" class="">
        <i class="fa fa-home fa-4x"></i>
        <p>Home</p>
      </a>
      <a href="#about" class="">
        <i class="fa fa-user-circle-o fa-4x"></i>
        <p>About</p>
      </a>
      <a href="#work" class="">
        <i class="fa fa-code-fork fa-4x"></i>
        <p>My Work</p>
      </a>
      <a href="#contact">
        <i class="fa fa-envelope fa-4x"></i>
        <p>Contact</p>
      </a>
    </nav>

#2

I think the lighter color on the links is coming from the color ease .35s under .side-bar a in the CSS.

As for why the image isn’t working, it’s hard to tell without seeing your folder set up and testing the code but my first guess would be that it seems that on the first and second lines you’re applying the image to body, h3, and p… which seems strange. Try creating a new div in the HTML just under the side-bar class, then setting the background image to that instead.

Alternatively, if you do intend to set the background image to body, h3, p, make sure that your file path is correct. The two dots before /img/city.jpg imply you’re moving backward two folders. Maybe your correct folder path is ‘/img/city.jpg’ or ‘./img/city.jpg’?

If neither of those are the solution, try altering the background-position you have set on the image.