Skip to content

Instantly share code, notes, and snippets.

@ebinnion

ebinnion/css

Created December 5, 2012 04:05
Show Gist options
  • Save ebinnion/4212129 to your computer and use it in GitHub Desktop.
Save ebinnion/4212129 to your computer and use it in GitHub Desktop.
Download ZIP
Fluid Background Image
Raw
css
div.column {
/* The background image must be 800px wide */
max-width: 800px;
}
figure.fluidratio {
padding-top: 10%; /* slope */
height: 120px; /* start height */
background-image: url(http://voormedia.com/examples/amsterdam.jpg);
background-size: cover;
-moz-background-size: cover; /* Firefox 3.6 */
background-position: center; /* Internet Explorer 7/8 */
Raw
html
<div class="column">
<figure class="fixedratio"></figure>
</div>
@ebinnion
Copy link
Author

ebinnion commented Dec 8, 2012

Can also use css cover for background image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment