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 luiscampos3
luiscampos3
4,904 Points

Adding a background image to the body of my website

<!DOCTYPE html>
<html>
  <head>
  <meta charset="ulf-8">
  <title> NBA Playoff 2016</title>
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/nba2016style.css">
  <link href='http://fonts.googleapis.com/css?family=Changa+One%7COpen+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>

</head>

<body>
 <header class="main-header">
 <div class="container"> 

    <h1 class="name"> NBA PLAYOFF 2016 </h1>
    <nav class="main-nav">
          <ul>
            <li><a href="nbaplayoff2016.html" class="selected">home</a></li>
            <li><a href="first.html">first round</a></li>
            <li><a href="confsemi.html">conference semifinals</a></li>
            <li><a href="confsemi.html">conference semifinals</a></li>
            <li><a href="conffinals.html">conference finals</a></li>
            <li><a href="finals.html">the finals</a></li>

          </ul>
   </nav>
 </div>
 </header>
 <h2> The Playoff Starts here!! </h2>
  <div class="east">
   <h4> Eastern Conference </h4>
    <p> 1. Cleveland </p>
    <p> 2. Toronto </p>
    <p> 3. Atlanta </p>
    <p> 4. Miami </p>
    <p> 5. Boston </p>
    <p> 6. Charlotte </p>
    <p> 7. Indiana </p>
    <p> 8. Detroit </p>
  </div>

<div class=west>
    <h4> Western Conference </h4>
    <p> 1. Golden State </p>
    <p> 2. San Antonio </p>
    <p> 3. Oklahoma City </p>
    <p> 4. L.A. Clippers </p>
    <p> 5. Portland </p>
    <p> 6. Memphis </p>
    <p> 7. Dallas </p>
    <p> 8. Houston </p>
</div>



<footer class="main-footer">
  <span>&copy;2016 NBA </span>
</footer>

</body>
</html>

/********************
background image
********************/
body {
 background-image: url("img/play1.jpg") no-repeat center center ;

}



/********************
basic layout
********************/

* {
  box-sizing: border-box;

}

h1 {
  color: red;
  text-align: center;
}

h2 {
  color: blue;
  text-align: center;
}

h4 {

  font-size: 4em;
}

p {
  font-size: 2em;

}
.container {
  padding-left: 1em;
  padding-right: 1em;
}

.main-header {
  background: #3acec2;
  padding: 1em 0;
}

.main-footer {
  text-align: center;
  padding: 2em;
  background: #d9e4ea;
}
/********************
Navigation
********************/
 nav {
   text-align: center;

   margin: 5px 0 0;
 }

 nav ul li {
   display: inline-block;

 }

 nav li {
   text-transform: uppercase;
  /* border-right: 2px solid yellow; */


 }

 nav li a {
   font-weight: 900;
   padding: 8px 2px;
   text-decoration: none;

 }


/********************
Teams
********************/
.east,
.west {
text-align: center;
}


/********************
Style Links
********************/
/* unvisited link */
a:link {
  color:purple;
}
/* visited link */
a:visited {
  color: green;
}

/* mouse over link */
 a:hover  {
  color: blue;
  /*background-color: orange; */
}

/*selected link */
a:active {
  color: yellow;
}

/********************
Media Queries
********************/
@media (min-width: 769px)
{
  .container
  {
    width: 80%;
    max-width: 1000px;
    margin: 0 auto;
  }
}
luiscampos3
luiscampos3
4,904 Points

I have looked around the treehouse videos and online examples of how to put a background image in the body of my website. I've build this website as an example to learning.

I have tried different ways of using the background image but with no success. Any help would be great!!

Jason Anders
Jason Anders
Treehouse Moderator 145,863 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,863 Points

Moderator Edited: Changed topic of discussion to CSS as this is what it relates to.

3 Answers

Brett Smith
Brett Smith
4,261 Points

Your CSS is in a different directory than your image files. You must first move out of your CSS directory back into the root directory where the img directory is located. To go backward into the new directory you must use ../

body {
  background-image: url('../img/play1.jpg');
}
luiscampos3
luiscampos3
4,904 Points

thanks!! that seems to solve the problem.

Alec Plummer
Alec Plummer
15,181 Points
Alec Plummer
Alec Plummer
15,181 Points 
/* try this */
body {
    background-image: url('/img/play1.jpg');
}

/* or this */
body {
    background-image: url('../img/play1.jpg');
}
luiscampos3
luiscampos3
4,904 Points

the .. really made the difference . thanks for your help.

Joe Schultz
Joe Schultz
6,191 Points
Joe Schultz
Joe Schultz
6,191 Points

Try this in your CSS file:

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

You could also do for the "background-repeat: no-repeat, repeat;". Play around with it and find what works for you.