Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by jihad miski
jihad miski
1,278 Points

can someone please help me get this thru ? wallpaper problems

i have this problem where i set up my wallpaper but its not being set properly its been 2 days trying to figure out how to fix it and no luck yet so could someone please be kind enough to take a look at this code and tell me what am i doing wrong ? i have tried removing the img from html but when i do that it gives me half of the img and everything seems to be not in order . thank you 

<!DOCTYPE html>
<html>
  <head>
     <meta charset="utf-8">
     <title> Jihad Miski | Designer </title>
     <link rel="stylesheet" href="css/normalize.css">
     <link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">
     <link rel="stylesheet" href="css/main.css">
   </head>
   <body>
     <header>
       <a href="main.html" id="logo">
         <h1>Jihad Miski</h1>
         <h2>Designer</h2>
       </a>
       <nav>
         <ul>
           <li><a href="main.html"></a></li>
           <li><a href="about.html" id="about">About</a></li>
           <li><a href="contact.html" id="contact">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
        <ul id="gallery">
          <li>
            <img src="img/wallpaper.jpg" alt="">
          </li>
        </ul>
      </section>
      <footer>
        <a href="http://instagram.com/ayrabfae"><img src="img/insta.jpeg" alt=""></a>
        <p>&copy; 2016 Jihad Miski </p>
      </footer>
    </div>
  </body>
</html>

/*******************************************
*******************************************
***********    general    *******************
*******************************************
*******************************************/

body {
  font-family: 'Poiret One', sans-serif;

}



  #wrapper {
max-width: 930px;
margin: 0 auto;
padding: 0% 5%;
background-color: transparent;


}


a {
  text-decoration: none;
}


img {
  max-width: 100%;

}



body {
background-image: url('../img/wallpaper.jpg');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}




/*******************************************
*******************************************
***********    positioning      ****************
*******************************************
*******************************************/

#logo {
  position: fixed; /* or absolute */
  top: 40%;
  left: 40%;
  margin: 0;
  }


  nav {
    text-align: center;     /* or absolute */
    top: 40% ;
    left: 40% ;
  }




/*******************************************
*******************************************
***********    font      *******************
*******************************************
*******************************************/


h1{
  font-family: 'Poiret One', sans-serif;
  margin: 15px 0;
  font-size: 3em;
  font-weight: normal;;
  line-height: 0.8em;
}

h2{
  font-family: 'Poiret One', sans-serif;
  margin: 30px 0;
  font-size: 1.24em;
  font-weight: normal;
  line-height: 0.8em;
}


/*******************************************
*******************************************
***********    color      *****************
*******************************************
*******************************************/

  a {
    color: #6ab47b;
  }

h1 , h2 {
  color: #fff;
}

#about {
  color: #808080;
}

#contact {
  color: #808080;
}



/*******************************************
*******************************************
***********    footer  *******************
*******************************************
*******************************************/

footer {
  font-size: 1em;
  text-align: center;
  padding-top: 50px;
  color: #808080;
}
Micheal Allen
Micheal Allen
19,311 Points

Hey Jihad, I've finally got to check my emails and replied to your email relating to this issue, hear from you soon! :)

1 Answer

Grace Kelly
Grace Kelly
33,990 Points
Grace Kelly
Grace Kelly
33,990 Points

Hi there, i would first recommend trying the following instead of background-image, background-repeat and background-position:

body {
    background: url('../img/wallpaper.jpg') no-repeat center center;

Secondly, I would check is your img being linked properly? Is it in a folder called img and is the css file in it's own folder that you need to exit out of to access the img??

jihad miski
jihad miski
1,278 Points

i got it fixed thank you micheal helped me out :)