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 Doegena Fennich
Doegena Fennich
8,974 Points

background-size: cover not working

Hey, how can i show the full background img

already tried background-size: cover but it didn't work.

here's the code http://jsbin.com/jujekekivu/edit?html,css

Thanks in advance.

1 Answer

Wesley Goldsborough
Wesley Goldsborough
4,824 Points

Not exactly sure what you mean by "show the full background image", but I'll offer some advice.

Your background image is "fixed". Try removing that and see if it helps accomplish your desired visual affect.

Also, "background-size: cover" doesn't guarantee that your entire image will always be visible – it just means that visible area of the element it is set on will always be "covered" by the image. Parts of the image may be cut off depending on the size of the viewport.

If you truly want your entire image to be visible regardless of the viewport size, then use the code below. Warning: your image will become stretched and look distorted depending on the viewport size.

.banner {
     background-size: 100% 100%;
}
Doegena Fennich
Doegena Fennich
8,974 Points

Thanks Wesley Goldsborough , I found the solution the same day i posted this.(same answer as yours) but thanks anyways!