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: Size and Position

Sahar Nasiri
Sahar Nasiri
7,454 Points
Posted by Sahar Nasiri
Sahar Nasiri
7,454 Points

background-size: 100% and cover

Can I use 100% instead of cover value?

5 Answers

Sina Maleki
Sina Maleki
6,135 Points
Sina Maleki
Sina Maleki
6,135 Points

Dear Sahar, you can see the difference between them in the link below. http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=cover

Best

Sahar Nasiri
Sahar Nasiri
7,454 Points
Sahar Nasiri
Sahar Nasiri
7,454 Points

salam :) khob covere in link k kole axo neshun nadad :)!?

Jacob Mishkin
Jacob Mishkin
23,118 Points

Great answer! Just a word of advice, Don't use w3schools as a place for reference. Its okay for basic stuff, but its not a reliable resource as you level up. Check out this CSS reference:

CSS Reference

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

If you use the background-cover property, I believe what this does is ensure the picture is as big as possible but you see every bit of the image which doesn't necessarily happen with the 100% percentage value. If you want to see the whole of the image, try using the cover value. :-)

Sina Maleki
Sina Maleki
6,135 Points
Sina Maleki
Sina Maleki
6,135 Points

"cover" yani kolle fazayi ke hast ro shamel beshe hatta agar aks bekhad kesh biad ya ghesmatish boride beshe. "contain", yani kole akso neshon bede ba in size, vali chon aks ro boresh nemide gayi az tol ya arz ghesmati khali mimone, "amma 100%" yani ham tol ro ham arz ro 100% kesh besh ta tamame tol va arz por beshe ke in halat aks ro az halate normal kharej mikone.

Ashley Valdez
PLUS
Ashley Valdez
Courses Plus Student 2,877 Points
Ashley Valdez
Ashley Valdez
Courses Plus Student 2,877 Points

Here's my question, how do you add an image to the background of the main home page of a website and get it to scale correctly? Even with the CSS syntax from these it never gets it correct. What's the problem? Is it my photograph?

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

If you add the background-image: property to the body or HTML element, i.e. the parent element of a HTML document, this will ensure that the image scales the width of the browser.

body {
    background-image: url('path to image');
    max-width: 100%;
}
Ashley Valdez
PLUS
Ashley Valdez
Courses Plus Student 2,877 Points
Ashley Valdez
Ashley Valdez
Courses Plus Student 2,877 Points

What's the ideal pixel size? For whatever reason your right, it fit the whole page but it doesn't show everything in the photograph? Why? It's like zoomed into the center of the pic and that's all that's showing. Then to it was a pic. taken on my iPhone 6. Does that have anything to do with it?