"React Router 4 Basics " was retired on October 1, 2023. You are now viewing the recommended replacement.

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 Shaun Russell
.a{fill-rule:evenodd;}techdegree seal-36
Shaun Russell
Front End Web Development Techdegree Graduate 18,510 Points

If you add a background image in your CSS, how can you contain it within it's parent element?

e.g. background-image: url('img/file-name.jpg') - If I am adding this image in my CSS, adding img {height: 100%; width; 100%} won't have an effect on this image because it is included in my CSS, not my HTML. The reason I want to know this is because I have an image that is larger than my div element and it cuts off.

Shaun Russell
.a{fill-rule:evenodd;}techdegree seal-36
Shaun Russell
Front End Web Development Techdegree Graduate 18,510 Points

Thank you!! That worked

2 Answers

idan ben yair
idan ben yair
10,288 Points

Hi Shaun,

If you want the picture to take the full size of the container you need to apply this to your css:

div { 
  background: url('img/img_3.jpg') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

this will make the image spread through out the whole content.

Hope that helped :)

idan ben yair
idan ben yair
10,288 Points
idan ben yair
idan ben yair
10,288 Points

Anytime my friend! :)