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
Ryan Scharfer
Courses Plus Student 12,537 PointsWhy set background to no-repeat when the image is not going to repeat anyway?
In Guil's Bootstrap Deep Dive, we set the background image to repeat on a couple of instances. I was playing around and I noticed not doing this had zero effect on the look of the site. I am assuming the image was too big for the container to repeat anyway. Is there a benefit to doing this that I am not seeing?
3 Answers
Jason Anello
Courses Plus Student 94,610 PointsHi Ryan,
The initial value for background-repeat is repeat. Not having been through this deep dive I can only guess that Guil wanted to set it explicitly for the purposes of teaching but in practice you would probably leave it off if you wanted the background to repeat because that's the default. The other reason you might need to set it to repeat is if it was set to something else higher up in the css file and you needed to get it back to repeat.
As you mentioned, if the background image is too big to fit into it's container then using repeat or no-repeat will have no visual difference on the page. Actually, depending on the background-position property you could see a big image partially repeating.
Dominic Fuchs
385 PointsIt's just clean. If you review your code to another time you don't have to look at your page to see that the background won't or will repeat. You should set it everytime because every browser got other default settings.
- Sorry for my English, I'm German. :)
Jason Anello
Courses Plus Student 94,610 PointsHi Dominic,
You might be confusing css property initial values with browser style sheets.
Every browser has its' own style sheet for setting default margins, padding, etc. on elements. These do not have to agree from browser to browser. This is why we have css resets and normalize.css These are used to equalize the differences between browsers so your page renders the same in every browser.
It would be very bad if browsers did not agree on the initial values for css properties. Probably every web page in existence would be broken if browsers did not agree on initial values.
These initial values are set in the css spec and it's up to the browser vendors to follow the spec.
Dominic Fuchs
385 PointsI didn't know that reset.css and normalize.css are part of the teaching in here => I didn't know that he use it. :) I just mixed up that sorry.
Dominic Fuchs
385 PointsI didn't know that reset.css and normalize.css are part of the teaching in here => I didn't know that he use it. :) I just mixed up that sorry.
Jason Anello
Courses Plus Student 94,610 PointsI was only speaking in general terms. I haven't gone through that deep dive so I don't know if they're using those css files or not.
I may have misunderstood your answer. I thought you were suggesting that you should set the background-repeat property every time because different browsers might use a different default value.
I was only trying to point out that browsers are supposed to agree on default values for css properties according to the spec.
So it's not really necessary to a set value every time if the default value is what you're trying to achieve.
With respect to setting it so that you don't have to look at your page to see which one it's doing. I think that over time as you use these properties more and more, you'll start to remember what these default values are and you won't really have to think about it anymore.
Ryan Scharfer
Courses Plus Student 12,537 PointsThanks guys for the help! Jason Anello -- I think that is exactly what we are doing in a couple of places -- with background positioning, moving the large image out of the "viewport" and therefore making the "no-repeat" relevant. I didnt think about that until you said that. Thanks again!