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 CSS Basics (2014) Basic Layout Backgrounds: Color and Images

Posted by Anthony Branze
Anthony Branze
4,887 Points

background-repeat: no-repeat;

Hey guys, I have been having zero problems with CSS, Up until now, I have the syntax correct, except it doesnt seem to respond to Any values, I have tried: repeat-x /repeat-y / round, None of my values for background-repeat: do anything, Anyone else have this issue or know how to resolve it?

my code CSS background-repeat: no-repeat; and when Im looking at the preview with Dev tools open, and I Inspect the element ".main-header" it shows all of the other style properties, but then no background-repeat:

6 Answers

Aaron Loften
Aaron Loften
12,864 Points

Hey Anthony,

I have a few tips...These should help you tell if you're viewing the proper thing.

1) Open the webpage in an inprivate/incognito browser window. 2) Which code editor are you using? Sometimes, a code editor will save a file with an extra extension for no reason and it wont tell you. eg: style.css.txt When this happens, often times the ".txt" part will be hidden. Go the projects directory and check to see if this is the case. 3) Have you tried restarting the editor? Sometimes they wont save properly, not sure why, but will say it has saved. 4) You could always copy the code, delete the page, make a new css page and paste it in there. This is probably the ultimate test on whether or not.

Good luck man.

Anthony Branze
Anthony Branze
4,887 Points
Anthony Branze
Anthony Branze
4,887 Points

If your window is not displaying correctly and you KNOW your code is correct Listen to arrons advice and open your preview in an incognito browser and if it displays correctly go into your settings and then > clear browsing data>>And make sure the box for clear cache is checked, Save and refresh original website preview. Good to go.

sizwengubane
sizwengubane
15,244 Points
sizwengubane
sizwengubane
15,244 Points

Hello, when u put any background image...it's getting repeated by default. To stop this repeating effect we do this

img {
  background-repeat: no-repeat;
}

Even if we do this...there is still a chance that our background image is not properly centered...so do this also

img {
  background-repeat: no-repeat;
  background-position: center;
}

Last but not least...we need to make sure the image spreads out in all directions of the background...so do this

img {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

Mark my answer as the best if i helped u

Anthony Branze
Anthony Branze
4,887 Points
Anthony Branze
Anthony Branze
4,887 Points

Yeah... I understand all of that.... even tried with all three of those but it does nothing, As if it ignores background-repeat: no-repeat;

sizwengubane
sizwengubane
15,244 Points

show me you full code

Anthony Branze
Anthony Branze
4,887 Points
Anthony Branze
Anthony Branze
4,887 Points 
 .main-header {
  background-color: #ffb585;
  padding-top: 170px;
  height: 850px;
  background-image: url('../img/mountains.jpg');
  background-size: 40%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
Jason Anders
MOD
Jason Anders
Treehouse Moderator 145,860 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,860 Points

Hey Anthony,

With the exception of you duplicating the background-size property, there is nothing wrong with your code. Move the cover up to the 40% spot and then delete the last one.

So, there should be no reason why it is not working/registering the no-repeat value.

I know these are silly questions, but did you 1. save the new CSS? 2. Refresh the page?

Maybe try clearing the cache and reloading. Other than that, I don't know what to tell you... the CSS is correct.

Sorry.

Anthony Branze
Anthony Branze
4,887 Points

Its okay, I know this cant be my code after deleting second size property still does same thing. idk whats going on though because i know people have gotten passed this. And yes I tried saving and refreshing, I also tried clearing cache closing and re-opening because i read about a caching issue. but no luck. Im not thinking anything is stupid just yet. thank you for the help I will update if i find anything.

Edit:: In all reality it is probably something stupid in my code because I was coding this up at the hospital while we thought my wife was going into labor and im tired so ill probably be able to find it in no problem tomorrow morning lol.