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
mrx3
8,742 PointsI have a question about making a large header background image responsive (Codepen included).
I've been experimenting with Zurb Foundation 5. I decided to practice making a large header with a background image. So far, as long as you resize the browser window by selecting a corner of the window, and making it bigger or smaller, the image resizes, but if I resize the browser window by the side the image is only responsive just a little.
So far I tried background-size 100% 100%; The result was the image get cropped and looks awful.
I also tried background-size: 100%; But the image gets way too small as the browser window shrinks.
Is there anyway to make this background image fully responsive with just CSS? If there is another way with jQuery or JavaScript, what are they? I'm really stuck and could us the help. Thanks in advance for any help.
Here's a link to the image I used: http://images.bwwstatic.com/columnpic6/300E1626-9C53-D81C-B166BC80502B1501.jpg
My Codepen: http://codepen.io/mike316/pen/aOdEea
3 Answers
Johannes Lehner
18,258 PointsThe problem you might have is that your image is set to "background-size: cover" and, therefor, uses all available space on the side where it has a minimum. if you always want to have the full image displayed, you might have to play around with the aspect ratio of the image itself...
here is a good link about what I am talking about: http://www.mademyday.de/css-height-equals-width-with-pure-css.html (don't forget the content: ""; otherwhise the ::before, and ::after pseudo elements won't be displayed in the dom)
What you have to do is to set the width to 100% and the height (using the trick) to be equal to the height of the image (percent of width) then you can set the background image to 100% width or cover - it will be the same.
mrx3
8,742 PointsThank you Johannes I really appreciate it.
Johannes Lehner
18,258 PointsYour welcome, I hope it helps you solve the problem. If you have any further questions, feel free to ask...