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

how to set background wallpaper ?? css

hello i have a ? if someone could help me out , i would like my main.html to contain a wallpaper how do i acheive that ? i have added

<img src="img/wallpaper.jpg"

but it is wayyy too big can someone please tell me how to make it my wallpaper on css ? 

img {
max-width: 100%;

i tried this but its not centered and it moves in and out !!

4 Answers

Micheal Allen
Micheal Allen
19,311 Points

Alright, it looks like you're trying to call the file but it's in a different folder. Let's modify your body tag styling so it can correctly link to the image file.

Currently you're main.css file is in /css folder.

Your wallpaper.jpg is in the /img folder.

The background image style attribute is looking for the wallpaper.jpg in a folder called img in the same folder as the .css file.

So it is looking for the wallpaper.jpg image in the /css/img folder.

We need to modify this so it can find the wallpaper.jpg image in the /img folder.

/*  We can do this by changing: */

body {
    background-image: url('img/wallpaper.jpg');
}

/*to: */

body {
    background-image: url('../img/wallpaper.jpg');
}

It seems like you have a few issues in your HTML and CSS code too.

Let's fix up your HTML first. Breaking it down by section.

This top section is fine:

<!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>

Alright heres our first error, the nav > ul > li > a are not being closed off with </a>

       <nav>
         <ul>
           <li><a href="main.html"></li>
           <li><a href="about.html" id="about">About</li>
           <li><a href="contact.html" id="contact">Contact</li>
        </ul>
      </nav>

it should be

      <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>

moving on..

    </header>
    <div id="wrapper">
      <section>

Alright, here you havent closed off the ul element

        <ul id="gallery">
          <li>
            <img src="img/wallpaper.jpg" alt="">
          </li>
      </section>

Here's what it should be:

        <ul id="gallery">
          <li>
            <img src="img/wallpaper.jpg" alt="">
          </li>
        </ul>
      </section>

The last of the code is fine.

      <footer>
        <a href="http://instagram.com/ayrabface"><img src="img/insta.jpeg" alt=""></a>
        <p>&copy; 2016 Jihad Miski </p>
      </footer>
    </div>
  </body>
</html>

Your final HTML code should look something like this:

<!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/ayrabface"><img src="img/insta.jpeg" alt=""></a>
        <p>&copy; 2016 Jihad Miski </p>
      </footer>
    </div>
  </body>
</html>

Alright, onto the errors in your css:

 /* you are missing the attribute in front of the value*/
   body{
     'Poiret One', sans-serif;
   }
 /* should be: */
   body{
     font-family: 'Poiret One', sans-serif;
   }

Hope this helps!

jihad miski
jihad miski
1,278 Points

:D:D:D thank you for taking the time realy i appreciate it ! i have one last issue if you have the time for it the wallpaper is good now but it seems like its being duplicated some how ! theyr on top of each other

and how can i move the about and contact to make it under my name or above it or however i want to place it ? it seems to be fixed .

Micheal Allen
Micheal Allen
19,311 Points

As you now have img/wallpaper.jpg set as your background -image. This block of html is no longer required.

       <section>
        <ul id="gallery">
          <li>
            <img src="img/wallpaper.jpg" alt="">
          </li>
        </ul>
      </section>

or if you're still wanting to add in new images into the #gallery, simply replace the wallpaper.jpg with a new image file name.

Micheal Allen
Micheal Allen
19,311 Points

Sure, swing me an email.

me@michealallen.com (be sure to keep an eye on how my name is spelt!)

I'll be more than happy to help :)

Micheal Allen
Micheal Allen
19,311 Points
Micheal Allen
Micheal Allen
19,311 Points

Hi Jihad, Try setting the body to have a background-image.

body{
    /* lets choose the file to set as the background image / wallpaper */
    background-image: url('img/wallpaper.jpg');

    /* Now to make sure the background image covers the whole area, lets make it so it covers the whole page regardless of the size of the screen.*/
    background-size: cover; 

   /*lets position it now to the center, vertically and horizontally */
    background-position: center center;

   /* to prevent the background image from repeating itself, we'll add this last line*/
    background-repeat: no-repeat;
}
jihad miski
jihad miski
1,278 Points

hey thank you for the detailed information but it doesnt seem to work i will copy paste my whole code if you could check it out would be great !!

<!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"></li>
         <li><a href="about.html" id="about">About</li>
         <li><a href="contact.html" id="contact">Contact</li>
      </ul>
    </nav>
  </header>
  <div id="wrapper">
  <section>
    <ul id="gallery">
      <li>
      <img src="img/wallpaper.jpg" alt="">
    </li>
  </section>
  <footer>
    <a href="http://instagram.com/ayrabface"><img src="img/insta.jpeg" alt=""></a>
    <p>&copy; 2016 Jihad Miski </p>
  </footer>
</div>
</body>
</html>

/*******************************************
*******************************************
***********    general    *******************
*******************************************
*******************************************/
body{ 'Poiret One', sans-serif;

}



 #wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
background-color: white;
}



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;
}

and my image is 1920 × 1080 does that matter or it should fix it alone ?

jihad miski
jihad miski
1,278 Points

i tried to remove the block u told me about but everything seems to b in chaos the footer is now in the middle and ugh !! is there a way i can screen shoot it and show it here to know what i mean ? or send it to u email or something sorry iam still new and trying to figure this out !

Brendon Butler
Brendon Butler
4,254 Points
Brendon Butler
Brendon Butler
4,254 Points

If you want a "wallpaper" for the whole website just use CSS.

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

Source: http://www.w3schools.com/css/css_background.asp

Aurelian Spodarec
Aurelian Spodarec
10,801 Points
Aurelian Spodarec
Aurelian Spodarec
10,801 Points

Your question is kinda vague from the point of helping you out for me.

Theres too little code, and you forgot to close the tags.

Do you have an example (website?) we could see?

Btw, you could always join slack channel and could help you there.