Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Select an option

  • Save sharpmachine/7234540 to your computer and use it in GitHub Desktop.

Select an option

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:
.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