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
Milosz Dunikowski
8,116 PointsHow to create responsive full-width images
Hey!
I've been tinkering recently with building a simple site on Bootstrap. Well, more like WordPress blogging theme, because I thought it'd be cool to become one of those sexy bloggers that tell people how to live. But I need an HTML prototype for that first, and that's where my blogging career came to a sudden halt.
What I want to do seems so simple, I feel pretty stupid for asking this question. I want a full-width image. You know, have some text content centered on the screen and above that a long-strip image that takes full browser-window width.
Here's the catch - I want it to look good on all screen sizes, so I can't just add "width: 100%" because on smarthphones long images would end up way to short. I think it would work best if image would take 100% width as long as height is not below 100px. After that, it should just cut overflowing sides.
I hope it doesn't sound too confusing! At first I thought it's a pretty easy task, but I completely can't figure it out. I was trying to do it with pure CSS (mostly because I'm JS illiterate), so maybe that is the case. Maybe someone here can come up with some solution? My famous blogger future depends on you!
2 Answers
Amber Cookman
12,662 PointsNot sure if this will be helpful or not, but my thinking lead me to utilizing media queries for this particular issue. So I searched around a little, and I think this article, and the related articles it links to, from Smashing Magazine may have the answers you are looking for. I'm not just spelling it out here only because it is long-winded, dependent on your specific design goals, and frankly, the article probably explains it better than I could (yet! ^_^).
Andreas cormack
Python Web Development Techdegree Graduate 33,011 PointsHi Milosz
just declare all images with max-width of 100% so they behave responsively in other words it spans the width of the parent container. That way when the view port changes size the image width changes. either that or declare a background image property.
css
img{
max-width:100%;
}
.parentcontainer{
background-image:url('yourimage.png');
background-repeat:no-repeat;
background-size:cover;
}
Milosz Dunikowski
8,116 PointsHi Andreas, thanks for answering! That was actually the first thing I tried to do, but while it looks great on big computer screens, resize browser and it's not so nice anymore:
Wide screen (cool, good looking image) http://imgur.com/NNUCAz3
Resized browser (way too short!). On smartphones you could barely see what the image. http://imgur.com/rhWKSEG
That's what I'm trying to accomplish on smaller size: http://imgur.com/VbYUXvN
EDIT: I guess I don't get the hang of imgur and Markdown yet. Let me just change that to links.
Milosz Dunikowski
8,116 PointsMilosz Dunikowski
8,116 PointsHey Amber! Thanks for that article you linked! I went through it, and while it didn't have an exact answer for what I needed, it gave me some good ideas. Instead of wasting time doing it like I wanted, I decided to go with much more elegant solution and simply used media queries like you said. It didn't work exactly like I had in mind, but hey - it's more about the content anyway ;) Thanks for sharing that!