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

General Discussion

Posted by Kerry Russell
Kerry Russell
Courses Plus Student 2,924 Points

How do I achieve this? which course do I need to watch?

Hi,

How do I get a div feature area and the content inside it, including a background image to scale with the browser?

http://web-09wltlfyez.treehouse-app.com/

I'll be putting text on a coloured transparent background that I want to overlap the image of me as browser is made smaller.

Any suggestions would be much appreciated. Been struggling with this for few days now :(

Kerry

2 Answers

Aisha Blake
STAFF
Aisha Blake
Treehouse Guest Teacher
Aisha Blake
Aisha Blake
Treehouse Guest Teacher

Just looking at your site in Firebug... To get the background image to scale, you'll want to assign the background-size to "contain". As for the odd cropping at larger size... The feature area was starting at the top of the page because the header has a float on it. I added "clear:left;" to the rules for #feature-area and removed the header's bottom margin.

Aisha Blake
Aisha Blake
Treehouse Guest Teacher
Aisha Blake
Aisha Blake
Treehouse Guest Teacher

You may also want to consider presenting that image another way. It seems like it's really more of a hero element than a background image. It's also just kind of floating there at smaller widths even once you get it to scale.

Kerry Russell
PLUS
Kerry Russell
Courses Plus Student 2,924 Points
Kerry Russell
Kerry Russell
Courses Plus Student 2,924 Points

Thanks Aisha :)

I've made those edits and see what you mean about the background image. I'm not sure what a hero element is, so I'm off to do some research :)

Aisha Blake
Aisha Blake
Treehouse Guest Teacher
Aisha Blake
Aisha Blake
Treehouse Guest Teacher

No problem! You can see an example of the type of "hero element" I'm talking about in the documentation for Bootstrap at http://getbootstrap.com/components/#jumbotron. It's up to you to decide whether or not you need something as robust as that framework, but you can always just use similar code for that one element. Note that the page only shows how the HTML needs to be structured. You'll need to inspect it in your browser or download Bootstrap and view the CSS using a text editor to understand how the styling works.