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 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?