Skip to content

Instantly share code, notes, and snippets.

@nternetinspired
Created May 5, 2015 13:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nternetinspired/6e3014ae45c4c9e5f1bb to your computer and use it in GitHub Desktop.
Save nternetinspired/6e3014ae45c4c9e5f1bb to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<div class="background">
<img class="center background-image" src="http://placehold.it/600x400">
</div>
// ----
// Sass (v3.4.13)
// Compass (v1.0.3)
// ----
.background {
height: 400px;
overflow: hidden;
position: relative;
&-image {
background-size: cover;
background-position: 0 0;
background-repeat: no-repeat;
position: absolute;
width: 100%;
img {
width: 100%;
}
}
}
// Utility class vertically and horizontally center thing of unknown size inside a parent of unknown size.
.center {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
text-align: center;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.background {
height: 400px;
overflow: hidden;
position: relative;
}
.background-image {
background-size: cover;
background-position: 0 0;
background-repeat: no-repeat;
position: absolute;
width: 100%;
}
.background-image img {
width: 100%;
}
.center {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
text-align: center;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<div class="background">
<img class="center background-image" src="http://placehold.it/600x400">
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment