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 Kevin Faust
Kevin Faust
15,353 Points

background image only filling half of div

If you load my workspace, you will see a box with a background image only taking up half of the div. I put a margin bottom on my paragraph to push down my button and I could see that the background image only goes as far down as the content. Im wondering how to fix this and get a background image that fills the div.

if i put a margin bottom on my paragraph tag of 210px, then the button gets pushed to the button and i get a full background. but im 100% sure this is wrong and that there is a way to achieve this simpler. i tried going through the dev tools but my plugin is making things too hard to see and i keep getting lost. can anyone help?

https://w.trhou.se/lmc9k1yvxf

3 Answers

Paul Nicolson
Paul Nicolson
4,799 Points

Hi Kevin, Love the site! I have had a look at the code and found that to get the image to fill its container a height for #slidebackground and .slides must be defined as 400px. The way it is now, the height of the image is tied to the height of the paragraph, which is why adding the margin made the image cover more of the container.

I used the following CSS and it seemed to work out:

.slides {
  height:400px;

}

/****CAROUSEL PICTURE****/

#slidebackground {
  background:url(../img/railroad.jpg) no-repeat center;
  background-size:cover;
  height:400px;

}```

Let me know if you come right!
Kevin Faust
Kevin Faust
15,353 Points

Hey Paul,

Thanks a lot!! It's finally working!!

Cheers!

Chyno Deluxe
Chyno Deluxe
16,936 Points
Chyno Deluxe
Chyno Deluxe
16,936 Points

Your slides would need to have a specified height. But because the height is not defined the slides only take up the space the elements inside need.

I hope this helps.

Kevin Faust
Kevin Faust
15,353 Points
Kevin Faust
Kevin Faust
15,353 Points

Thanks everyone for the help