Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Flexbox Layout Building a Layout with Flexbox Aligning Items to the Bottom of a Column

Dawson Beggs
Dawson Beggs
274 Points
Posted by Dawson Beggs
Dawson Beggs
274 Points

Flexbox background images & text overlay

Is it possible to use flexbox with responsive background images and text overlay? How would this be achieved properly? Essentially I'd like a 3 col layout, background image, and centered title text within each 'image box'

frank martinez
frank martinez
8,858 Points

sooo.. how is it coming along?

2 Answers

Kristopher Van Sant
PLUS
Kristopher Van Sant
Courses Plus Student 18,830 Points
Kristopher Van Sant
Kristopher Van Sant
Courses Plus Student 18,830 Points

Hey Dawson, I did a google search trying to find what you've described and I haven't found anything where someone used flexbox directly with responsive background images. And I'm not familiar enough with it to say yes or no to whether it's possible or how to do it properly. I would experiment with it to see if you can do it though! No harm in trying! :)

J.D. Sandifer
J.D. Sandifer
18,813 Points
J.D. Sandifer
J.D. Sandifer
18,813 Points

It's been a while since I looked at that kind of thing, but it seems like it might be possible.

Are you able to do the separate parts on their own? I.e. can you make a responsive background image? Can you get a flexbox to work the way you want it (without a responsive background image)? And text overlay (again, by itself)?

If not, I would start with those items - try to figure each one out separately, asking questions if necessary - and by the time you can do that you can probably answer the question yourself.

If you can already do that stuff - what approach have you tried to integrate them? Can you show us an example of CSS & HTML that you tried, but didn't work right?