HELP! Background is not responsive

Question

Hi

I've been working on this issue for a few weeks now and can't figure out how to do it right. The site is responsive accept for the background image on the home page. Here is the website: curtisfisher.net

Here is the html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Curtis Fitness Personal Training | South Bay Personal Trainer</title>
    <meta name="description" content="Lose weight in a week with my personal training and diet tips.  I can also show you how to build muscle and strength." />
    <meta name="keywords" content="personal trainer, lose weight, fast diet, exercise, personal trainer south bay, athletic training, six pack abs" />
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Bangers' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


  </head>


    <body class="weightroom">

    <header>
      <a href="index.html" id="logo">
        <h1>Curtis Fitness</h1>
        <h2>Personal Training</h2>
     </a>
      <nav>
        <ul>
          <li><a href="index.html" class="selected">Home</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="services-pricing.html">Pricing</a></li>
          <li><a href="contact.html">Contact</a></li>
          <li><a href="http://curtisfisher.net/blog">Blog</a></li>
        </ul>
      </nav>
  </header>
  <div id="slogan">
  <span>Stand out from the crowd...</div>
    <div id="naturally"><span>naturally.</span>
</div>
<br /><br /><br /><br /><br /><br />
  <div id="location">
    <span>22216 Palos Verdes Boulevard</span><div/>
      <div id="location2">
      <span>Torrance, CA 90505</span><div>
      <div id="location3">
      <span>310-947-9200</span></div>
        <footer>
          <a href="http://twitter.com/CurtisFitnessTV"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
           <a href="http://facebook.com/curtisfitnesspersonaltraining"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2014 Curtis Fisher. | <a href="privacy.html">Privacy Policy</p>
      </footer>

        <script type="text/javascript" src="//s3.amazonaws.com/scripts.hellobar.com/da707460f45a4dab72273425e7b672b8428c75f7.js"></script>



<script type="text/javascript">
adroll_adv_id = "ZYKYMPFOSBDTHJSXIZD2DP";
adroll_pix_id = "2HIRB62F5BGLFNOKGEK42G";
(function () {
var oldonload = window.onload;
window.onload = function(){
   __adroll_loaded=true;
   var scr = document.createElement("script");
   var host = (("https:" == document.location.protocol) ? "https://s.adroll.com" : "http://a.adroll.com");
   scr.setAttribute('async', 'true');
   scr.type = "text/javascript";
   scr.src = host + "/j/roundtrip.js";
   ((document.getElementsByTagName('head') || [null])[0] ||
    document.getElementsByTagName('script')[0].parentNode).appendChild(scr);
   if(oldonload){oldonload()}};
}());
</script>



      </body>
    </html>

Here is the css:

/**************************
GENERAL
**************************/

body {
  font-family: 'Open Sans', sans-serif;
}

a {
text-decoration: none;
}

#privacy {
  clear: both;
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;

}

#wrapper {
  clear: both;
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;

}

/* glinks*/
a {
  color: #6ab47b;
}

img {
  max-width: 100%;
}

h3 {
  margin: 0 0 1em 0;
}
/**************************
HEADING
**************************/
header {
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
}


#logo {
  text-align: center;
  margin: 0;
}

h1 {
  font-family: 'Bangers', cursive, sans-serif;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
}

h2 {
font-size: 0.75em;
  margin:-5px 0 0;
  font-weight: normal;
}


/**************************
NAVIGATION
************************/


nav {
  text-align: center;
  padding: 10px 0;
  margin: 20px 0 0;

}

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}

nav li {
  display: inline-block;
}

nav a {
  font-weight: 800;
  padding: 15px 10px;
}

/**************************
FOOTER
**************************/

footer {
  font-size: 0.75em;
  text-align: center;
  clear: both;
  padding-top: 50px;
  color: #ccc;
}

.social-icon {
  width: 20px;
  height: 20px;
  margin: 0 5px;
}



/**************************
PAGE: PRICING
**************************/
#pricing {
font-family: 'Bangers', cursive, sans-serif;
  margin:0 5% 0 0;
  color: #fff;
  font-size: 3em;
  padding: 0 0 0 30px;
text-shadow: -1px 0 #0099cc, 0 1px #0099cc, 1px 0 #0099cc, 0 -1px #0099cc;
}

#pricing_description {
margin: 10px 5% 40px 0;
padding: 0 0 0 30px;

}


/**************************
PAGE: ABOUT
**************************/

.profile-photo {
  display: block;
  max-width: 150px;
  margin: 0 auto 30px;
  border-radius:100%;
}

/**************************
PAGE: CONTACT
**************************/

.contact-info {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9em;
}

.contact-info a {
  display: block;
  min-height: 20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding: 0 0 0 30px;
  margin: 0 0 10px;
}

.contact-info li.phone a {
  background-image: url('../img/phone.png');

}

.contact-info li.mail a {
  background-image: url('../img/mail.png');

}
  .contact-info li.twitter a {
  background-image: url('../img/twitter.png');
}

/**************************
COLOR
**************************/

/*site body*/
body {
  background-color: #fff;
  color: #999;
}

/* nav background on mobile devices*/
nav {
  background: #DAE6E6;
}

/* green header*/
header {
  background-color:#fff;
  background-color: rgba(255, 255, 255, 0.6);
  border-color: green;

}
/* logo text*/
h1, h2 {
  color: #0066cc;
}

/* nav links*/
nav a, nav a:visited {
  color: #0066cc;
}

/* selected nav link color*/
nav a.selected, nav a:hover {
  color:#669999;
}

.weightroom {
  background: url('../img/mirror-pic-large.jpg');
  background-repeat: no-repeat;
  }




#slogan span {
  font-family: 'Bangers', cursive, sans-serif;
  margin:80px 5% 80px 0;
  color: white;
  font-size: 4em;
  padding: 0 0 0 30px;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

}

#naturally span {
  font-family: 'Bangers', cursive, sans-serif;
  margin:80px 5% 80px 0;
  color: white;
  font-size: 5em;
  padding: 0 0 0 30px;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

}

#location span {
margin:80px 5% 80px 0;
color: #fff;
padding: 0 0 0 30px;
font-size: 1.5em;

}

#location2 span {
margin:80px 5% 80px 0;
color: #fff;
padding: 0 0 0 30px;
font-size: 1.5em;

}

#location3 span {
margin:80px 5% 80px 0;
color: #fff;
padding: 0 0 0 30px;
font-size: 1.5em;

}

/**************************
TABLE
**************************/


* {
    margin: 0;
    padding: 0;
  }

  .pricing_table {
  line-height:150%;
  font-size: 12px;
  margin: 0 auto;
  width: 75%;
  max-width: 800px;
  padding-top: 10px;

}

.price_block {
  width: 100%;
  color: #fff;
  float: left;
  list-style-type: none;
  transition: all 0.2s;
  position: relative;
  box-sizing: border-box;
  margin-bottom: 10px;
  border-bottom: 1px solid transparent;
}

.pricing_table h3 {
    text-transform: uppercase;
    padding: 5px 0;
    background: #0066cc;
    margin: -10px 0 1px 0;
    text-align: center;
}

.price {
    display: table;
    background: #0099cc;
    width: 100%;
    height: 70px;
    }

  .price_figure {
    font-size: 24px;
    text-transform: uppercase;
    vertical-align: middle;
    display: table-cell;
    text-align: center;
  }

  .price_number {
    font-weight: bold;
    display: block;
}

.price_tenure {
    font-size: 11px;
}

.features {
    background: #DEF0F4;
    color: #000;
}

.features li {
    padding: 8px 15px;
    border-bottom: 1px solid #ccc;
    font-size: 11px;
    list-style-type: square;
}

.pricing_table h3 {
    text-transform: uppercase;
    padding: 5px 0;
    background: #333;
    margin: -10px 0 1px 0;
}

.footer {
    padding: 15px;
    background: #DEF0F4;

}
.action_button {

    text-decoration: none;
    color: #fff;
    font-weight: bold;
    border-radius: 5px;
    background: linear-gradient(#666, #0099cc);
    padding: 5px 20px;
    font-size: 11px;
    text-transform: uppercase;

}

.price_block:hover {
    box-shadow: 0 0 0px 5px rgba(0, 0, 0, 0.5);
    transform: scale(1.04) translateY(-5px);
    z-index: 1;
    border-bottom: 0 none;
}
.price_block:hover .price {
    background:linear-gradient(#009933, #33AD5C);
    box-shadow: inset 0 0 45px 1px #47FF47;
}
.price_block:hover h3 {
    background: green;
}
.price_block:hover .action_button {
    background: linear-gradient(#009933, #33AD5C);
}

@media screen and (min-width: 480px) {


/**************************
TWO COLUMN LAYOUT
**************************/

#primary {
    width: 50%;
    float: left;

}
#secondary {
    width: 40%;
    float: right;
  }

#david {
    width: 50%;
    float: left;

}

#testimony {
    width: 40%;
    float: right;
  }


/**************************
PAGE: HOME
**************************/



/**************************
PAGE: PORTFOLIO
**************************/

  #gallery li {
    width: 28.3333%;  
  }

  #gallery li:nth-child(4n) {
    clear: left;
  }

/**************************
PAGE: ABOUT
**************************/

  .profile-photo {
    float: left;
    margin: 0 5% 80px 0;
  }

}

@media screen and (min-width: 660px) {


 /**************************
HEADER
**************************/   

    nav {
      background: none;
      float: right;
      font-size: 1.125em;
      margin-right: 5%;
      text-align; right;
      width; 45%
    }

    #logo{
      float: left;
      margin-left: 5%;
      text-align: left:
      width: 45%;
    }


   h1 {
      font-size: 2.5em;
    } 


    h2{
      font-size: 0.825em;
      margin-bottom: 20px;
    }

    header {
      border-bottom: 5px solid #949E9E;
      margin-bottom: 60px;
    }

}

@media only screen and (min-width : 480px) and (max-width : 768px) {
    .price_block {width: 50%;}
    .price_block:nth-child(odd) {border-right: 1px solid transparent;}
    .price_block:nth-child(3) {clear: both;}

    .price_block:nth-child(odd):hover {border: 0 none;}
}
@media only screen and (min-width : 768px){
    .price_block {width: 25%;}
    .price_block {border-right: 1px solid transparent; border-bottom: 0 none;}
    .price_block:last-child {border-right: 0 none;}

    .price_block:hover {border: 0 none;}
}

Thanks any tips are appreciated!

Answer 1 · 2014-07-10T02:12:24Z

July 10, 2014 2:12am

To get it to change size, you could use background-size:

.weightroom {
  background-size: contain;
}

or

.weightroom {
  background-size: cover;
}

The image might not scale well though. You might want to consider swapping it out with something else using a media query when the screen size gets too small.

Answer 2 · 2014-07-10T18:46:25Z

July 10, 2014 6:46pm

background-size:cover;

The best possible way and there there are a few polyfills to implement this in older browsers.

Welcome to the Treehouse Community

Looking to learn something new?

fitrobotic

fitrobotic

HELP! Background is not responsive

2 Answers

Aaron Graham

Aaron Graham

Shaker Advertising

Shaker Advertising