CSS-Tricks is brought to you in part by Media Temple, the web hosting that we both use and recommend.
Whether you have this kind of question or not, this might be a solution to make fluid container height to follow it’s background image height. Same with the technique to make a fluid height video with pure CSS ⇒ http://alistapart.com/article/creating-intrinsic-ratios-for-video
Set the container height to `0` and create a large bottom (or top) padding based on it’s background image ratio to fake the container height:
background:yellow url('img/400x150.jpg') no-repeat 50% 0;
padding-top:37.5%; /* `150/400 × 100` */
Hacky but works ⇒ http://codepen.io/tovic/pen/ewxcv
I’ve used something like that to create responsive animated sprites :) http://codepen.io/CrocoDillon/pen/ekuxb
You must be logged in to reply to this topic.
Search for Stuff
Browse the Archives
Get the Newsletter
... or get the RSS feed