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 Joseph Torres
Joseph Torres
6,282 Points

CSS background images...

I've been downloading some background images from pexels.com and using this code: body {background-image: url("") position:relative; background-repeat: no-pepeat background-size: 100% 100vh;} The image doesnt come out too well. What's a rule of thumb for background image sizes and the CSS code that goes along with it????

5 Answers

Dean Kennedy
Dean Kennedy
4,491 Points
Dean Kennedy
Dean Kennedy
4,491 Points

First change "no-pepeat"(in your code attached) to "no-repeat" and see what happens.

Joseph Torres
Joseph Torres
6,282 Points
Joseph Torres
Joseph Torres
6,282 Points

Hello, the original code is no-repeat, it was just a typo on this page. If I remove that code and try background-position:center center; or position: cover it just zooms in. Im just frustrated because I just want to do a very very simple landing page as a product. I just need a general idea of all of this.

Dean Kennedy
Dean Kennedy
4,491 Points
Dean Kennedy
Dean Kennedy
4,491 Points

"cover" is not a background-position value but a background-size value. I assume also you want the image to take up the whole visible area of the page?

Joseph Torres
Joseph Torres
6,282 Points
Joseph Torres
Joseph Torres
6,282 Points

Thank you agin for your help. Absolutely, I just want to know now and in the future when selecting a background image to fill a site, what dimensions to look for and the CSS code behind it because I know it cant be this hard. Here's a project Im working on that I have to mimic...

https://www.google.com/search?q=wix+engagement+site+template&safe=strict&source=lnms&tbm=isch&sa=X&ved=0ahUKEwjtg4rd08LTAhXK4iYKHXNmCIIQ_AUICCgB&biw=1440&bih=770#imgrc=P02EovCv4ROrUM:

Joseph Torres
Joseph Torres
6,282 Points

Im so sorry I forgot to mention that I dont have that background but Im looking for an image like that with similar dimensions and this is where I draw a blank. I dont want to just know for now but for in the future as well. Thank you so much.

Dean Kennedy
Dean Kennedy
4,491 Points
Dean Kennedy
Dean Kennedy
4,491 Points

Unfortunately I have no idea. There is a TeamTreehouse course related to web images but I can't remember which 1 specifically. Good luck with the project