Created
October 30, 2013 15:26
-
-
Save sharpmachine/7234540 to your computer and use it in GitHub Desktop.
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. 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:
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .fluid-bg { | |
| background:yellow url('img/400x150.jpg') no-repeat 50% 0; | |
| background-size:100% auto; | |
| height:0; | |
| padding-top:37.5%; /* `150/400 × 100` */ | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment