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

having problems with wallpaper !! it is duplicating somehow , help !

okay so i need to have a wallpaper set but somehow it is being duplicated and i cannot fix this problem , iam still new & trying to get around this but no luck , so i would appreciate the help .

if you could leave your email so i can send you my screenshots & the code would be great thank you again .

1 Answer

Ash Scott
Ash Scott
435 Points
Ash Scott
Ash Scott
435 Points

I assume it's a background image... If it is, add the following CSS to the element which is repeating:

background-repeat: none;

You may need to then add:

background-size: cover;

This will make the background scale to fit the element, while maintaining the aspect ratio and not distoring. The only distortion you'll get is if you have a small image set to cover a large <div>.

Btw, if you post a screenshot here it will make it easier to diagnose. Not many people are willing to give out their emails willy nilly ;)

Kind regards, Ash

jihad miski
jihad miski
1,278 Points

thnk you i will just post my code here if you can take a look at it btw i already added the code you gave me but i dont know why its not being fixed , its frustrating i have tried everything i even removed the img src from the html but the screen just cuts in half ! how can i upload a screen shot from here ?

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

/*******************************************
*******************************************
***********    general    *******************
*******************************************
*******************************************/

body {
  font-family: 'Poiret One', sans-serif;

}



  #wrapper {
max-width: 930px;
margin: 0 auto;
padding: 0% 5%;
background-color: transparent;


}


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;
}
Ash Scott
Ash Scott
435 Points

Morning jihad miski,

I've put your code into a codepen: http://codepen.io/AshboDev/pen/dpWodr

It appears that the bg image is no longer repeating with the code below (I assume it's the one on the body). If it's still doing it to you, in your HTML, add '?ver=2' to the end of your CSS file. This will make the browser see the CSS file as a new document, and re-download it, thus clearing any cache. I suspect there's a caching issue of kinds going on here.

If it still happens, can you upload it to your web server and send me a link please?

Cheers, Ash