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!

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

Joseph Mercado
Joseph Mercado
5,846 Points
Posted by Joseph Mercado
Joseph Mercado
5,846 Points

@media Issue

I am having issue when scaling my page so that it adjusts to smart phones. Everything but the background images for the header and footer comes out perfect. Why wont the background image show? Here is my css code media section:

@media (max-width: 1024px) {
  .primary-content, .secondary-content {
    width: 90%;
  }
}

@media (max-width: 768px) {
  .primary-content, .secondary-content {
    width: 100%;
    padding: 20px;
    border-top: none;
  }

  .main-header {
    max-height: 380px;
    padding: 50px 25px 0;
  }

  h1 {
    font-size: 5rem;
    line-height: 1.1;
  }

  .arrow {
    display: none;
  }

  .main-footer {
    padding: 20px 0;
  }
}

Moderator edited: Markdown added so code renders properly in the forums.

Joseph Mercado
Joseph Mercado
5,846 Points
Joseph Mercado
Joseph Mercado
5,846 Points

Here is the full CSS

@font-face {
    font-family: 'Abolition Regular';
    src: url('../fonts/abolition-regular-webfont.eot');
    src: url('../fonts/abolition-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/abolition-regular-webfont.woff') format('woff'),
         url('../fonts/abolition-regular-webfont.ttf') format('truetype');
}

body {
  text-align: center;
  font-family: "Times New Roman", Arial, sans-serif;
  /*background:  #e3a2e4;*/
}

.main-header {
  background: url("../back1.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: 100%;
  height: 250px;
  padding-top: 100px;
  padding-bottom: 100px;
  /*background: #ea86c6;
  height: 450px;
  padding-top: 100px;
  padding-bottom: 100px;*/
}

h1 {
  font-size: 5.625rem; /* 90px/16px  */
  color: #7a33ff;
  text-transform: uppercase;
  font-weight: normal;
  line-height: 1.3;
  /*text-shadow: 5px 8px 10px #222;*/
  text-shadow: 0 1px 0 #ccc,
             0 2px 0 #c9c9c9,
             0 3px 0 #bbb,
             0 4px 0 #b9b9b9,
             0 5px 0 #aaa,
             0 6px 1px rgba(0,0,0,.1),
             0 0 5px rgba(0,0,0,.1),
             0 1px 3px rgba(0,0,0,.3),
             0 3px 5px rgba(0,0,0,.2),
             0 5px 10px rgba(0,0,0,.25),
             0 10px 10px rgba(0,0,0,.2),
             0 20px 20px rgba(0,0,0,.15);

}

h2 {
  font-size: 3.3125em; /* 53px/16px  */
  font-weight: normal;
  line-height: 1.1;
  margin: 0 0 .5em;
  padding-top: 25px;
}

h1, h2 {
  font-family: 'Abolition Regular', Arial, sans-serif;
}

p {
  width: 700px;
  margin: auto;
  padding-bottom: 25px;
  text-align: justify;
  font-size: 24px;
}

li {
  display: inline-block;
  margin: auto;
  font-size: 22px;
  /*border-bottom: 2px solid purple;*/
}

a:link {
  text-decoration: none;
}

a:visited {
  color: #27598e;
}

a:active {
  color: black;
}

a:hover {
  color: lightblue;
}

.main-footer {
  background: url("../back1.jpg") no-repeat center center fixed;
  height: 250px;
  color: white;
}

.t-border {
  border-top: 2px solid lightgrey;
}

.yellow {
  border-top: 5px double #8c8b8b;
  width: 250px;
  border-bottom: none;
  border-right: none;
}

.arrow {
  width: 50px;
}

.primary-content {
  color: white;
  background-color: #811ced;
  padding: 8% 4%;
  border-top: 10px solid #ffa949;
  margin: 105px 0 60px;
  box-shadow: 15px 15px 10px -5px rgba(0, 0, 0, .8), inset 0 0 50px 10px rgba(0, 0, 0, 1);
  border-radius: 20px;
}

.secondary-content {
  /*background: url("imgs/back1.jpg") no-repeat center center fixed;*/
}

.primary-content,
.secondary-content {
  width: 75%;
  padding-left: 50px;
  padding-right: 50px;
  margin: auto;
  max-width: 900px;
}

img {
  max-width: 100%;
  margin-bottom: 20px;
  margin-left: 20px;
  margin-right: 20px;
  border-radius: 20px;
}

@media (max-width: 1024px) {
  .primary-content, .secondary-content {
    width: 90%;
  }
}

@media (max-width: 768px) {
  .primary-content, .secondary-content {
    width: 100%;
    padding: 20px;
    border-top: none;
  }

  .main-header {
    max-height: 380px;
    padding: 50px 25px 0;
  }

  h1 {
    font-size: 5rem;
    line-height: 1.1;
  }

  .arrow {
    display: none;
  }

  .main-footer {
    padding: 20px 0;
  }
}

And the HTML

<!DOCTYPE html>
<html lang="en-us">
<head>
    <title>Julie's Junior Year</title>
    <link rel="stylesheet" type="text/css" HREF="css/main.css" />
    <meta name"viewport" content="width=device-width">

</head>
    <body>
    <header class="main-header">
        <h1>Julie's Junior Year</h1>
    <img class="arrow" src="imgs/arrow.svg" alt="Down arrow">

    <ul>
      <li><a href="#current">Current</a></li>
      <li>-</li>
      <li><a href="#art">Art</a></li>
      <li>-</li>
      <li><a href="#contact">Contact</a></li>
    </ul>

    </header>
    <div id="current" class="primary-content t-border">
      <h2>First Day of School</h2>
      <hr class="yellow">
      <img src="imgs/julie1.jpg" alt="Julie" height="500px" width="175px"/>
      <!-- <img src="imgs/julie2.jpg" alt="Julie" height="500px" width="300px"/> -->
      <p>Julie was very excited for her first day of school. She has added an extra honors class for the school year. Her honors classes are English and History. She is also taking Algebra 2 and Physics. She has a lot of school supplies and is ready for this year. Her mom and I are so very proud of her.</p>

    </div>
    <div id="art" class="secondary-content t-border">
      <h2>Julie's Art Work</h2>
      <hr class="yellow">
      <img src="imgs/cuddles1.jpg" alt="Julie" height="200px" width="400px"/>
      <img src="imgs/cuddles2.jpg" alt="Julie" height="200px" width="400px"/>
      <img src="imgs/cuddles3.jpg" alt="Julie" height="200px" width="400px"/>
      <img src="imgs/cuddles4.jpg" alt="Julie" height="200px" width="400px"/>
      <img src="imgs/cuddles5.jpg" alt="Julie" height="200px" width="400px"/>
      <img src="imgs/cuddles6.jpg" alt="Julie" height="200px" width="400px"/>
    </div>
    <footer class="main-footer">
    <div id="contact" class="ending-content">
      <h2>Contact Us</h2>
      <p>If you would like to let Julie know how much you enjoy her art work, please send an email to her parents who look over her page. They can be reached at <a href="mailto:jryel1@yahoo.com">jryel1@yahoo.com.</a></p>
    </div>
    </footer>

    </body>
</html>

As you can tell, the @media is at the bottom of the CSS file. Any assistance is greatly appreciated.

Thanks.

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Joseph Mercado sorry about that. I posted an answer about your media queries being above other rules before I fixed the markdown on your original post. At that time, it did look like they were on top. I see now that they aren't. :smiley:

2 Answers

Joseph Mercado
Joseph Mercado
5,846 Points
Joseph Mercado
Joseph Mercado
5,846 Points

That did it. Removing fixed solved it. Awesome for the help. :)

Eric Butler
Eric Butler
33,512 Points

Cheers!

Eric Butler
Eric Butler
33,512 Points
Eric Butler
Eric Butler
33,512 Points

Joseph, I think the path you have written in your CSS background declarations -- "../back1.jpg" -- is a broken file path. That would point to an image that's sitting one folder up from wherever this CSS file is sitting, so hypothetically:

|-- index.html
|-- back1.jpg
|-- css/
       |-- styles.css

Something tells me your back1.jpg file is actually in the /imgs/ folder with the rest of your images, so your CSS path should read:

url("../imgs/back1.jpg")

Hope that fixes it for you! Let me know if it does.

Joseph Mercado
Joseph Mercado
5,846 Points
Joseph Mercado
Joseph Mercado
5,846 Points

Tried that. Still doesn't show the image in the header or footer if the page is loaded on a small screen.

Eric Butler
Eric Butler
33,512 Points

Try removing "fixed" from the ends of both background declarations. I think your image may be falling out of your divs.

Here's a good way to troubleshoot it: I took the HTML and CSS you posted and made a CodePen with it: https://codepen.io/ericbutler555/pen/JyQyYa/?editors=1100#0

Literally the only things I did were (1) changed the URLs for the background images to an image-placeholder link, and (2) removed "fixed" from the declarations. Try adding and removing the "fixed" from the CSS declaration to see how it changes it.

Or if you really wanted to use background-attachment: fixed effect, then you need to use larger (taller) images so they don't fall out of the divs when you scroll/resize the page.