What's the difference in properties between an image and a profile photo when it comes to background-repeat?

Question

I'm doing the exercises How to Make a Website and I want to know why doesn't the browser see the profile photo as an image and treats it as something else. Shouldn't that be an image too?

Answer 1 · 2015-02-27T18:06:35Z

February 27, 2015 6:06pm

If you scroll all the way down to the CSS part, you can see that the profile photo doesn't get the background-repeat: no-repeat treatment in the About section like the icons do in the Contact section. Why is this? What makes my profile image unique to the rest of the images on the website?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Otto Mejia | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,700,800,400' 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>
    <header>
      <a href="index.html" id="logo">
        <h1>Otto Mejia</h1>
        <h2>Designer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html" class="selected">Portfolio</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
      <div id="wrapper">
      <section>
        <ul id="gallery">
          <li>
            <a href="img/numbers-01.jpg">
              <img src="img/numbers-01.jpg" alt="">
              <p>Experimentation with color and texture</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt="">
              <p>Playing with blending modes in photoshop.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-06.jpg">
              <img src="img/numbers-06.jpg" alt="">
              <p>Trying to create an 80's style of code.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-09.jpg">
              <img src="img/numbers-09.jpg" alt="">
              <p>Drips created using Photoshop brushes.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-12.jpg">
              <img src="img/numbers-12.jpg" alt="">
              <p>Creating shapes using repitition.</p>
            </a>
          </li>
        </ul>
      </section>
      <footer>
        <a href="https://twitter.com/Otto__me" target="_blank">
        <img src="img/twitter-wrap.png" alt"Twitter Logo" class="social-icons"></a>
        <a href="https://ottosportfolio.squarespace.com" target="_blank">
        <img src="img/facebook-wrap.png" alt"Facebook logo" class="social-icons"></a>
        <p>&copy; 2015 Otto Mejia.</p>
      </footer>
    </div>
  </body>
</html>

/****CSS****/
/********************
GENERAL
*********************/


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

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

a {
  text-decoration: none;
}

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: 'Changa One', 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-icons {
  width: 20px;
  height: 20px;
  margin: 0 5px;
}



/********************
PAGE: PORTFOLIO
*********************/
#gallery {
  margin: 0;
  padding: 0;
  list-style: none;  
}

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;  
}

#gallery li a p{
  margin: 0;
  padding: 5%;
  font-size: 0.85em;
  color: #336699;
}


/********************
ABOUT
*********************/

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



/********************
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');
}





/********************
COLORS
*********************/

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

/* green header*/
header {
  background: #3399cc;
  border-color: #336699;
}

/* nav background on mobile */

nav {
 background: #336699;
}

/* logo text */

h1, h2 {
  color: #fff;
}

a {
 color: #336699;

}


/* nav link */
nav a, nav a:visited {
  color: #fff;
}


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

Welcome to the Treehouse Community

Looking to learn something new?

Otto Mejia

Otto Mejia

What's the difference in properties between an image and a profile photo when it comes to background-repeat?

Rich Bagley

Rich Bagley

1 Answer

Otto Mejia

Otto Mejia