Skip to content

Instantly share code, notes, and snippets.

@zanesensenig
Created February 18, 2016 14:17
Show Gist options
  • Save zanesensenig/5ae861389c79eb7504e9 to your computer and use it in GitHub Desktop.
Save zanesensenig/5ae861389c79eb7504e9 to your computer and use it in GitHub Desktop.
Containerless BG Embed
.bg-embed{
background:url(https://upload.wikimedia.org/wikipedia/commons/6/67/Inside_the_Batad_rice_terraces.jpg);
margin: auto;
calc(-50vw + 50%);
background-size: cover;
background-repeat: no-repeat;
background-position: 50%;
/* padding-bottom: 25%; */
}
<div class="bg-embed">
<div style="margin-left:10px;margin-right:10px">
SOME CONTENT
<br />
Lorem ipsum dolor sit amet, his in labores patrioque. Melius reprimique consequuntur qui ea, fugit dicit nemore sea ea. Cibo legere ea nam. Odio nostrud vivendum vis id, meis debet recusabo pro te. Mei principes torquatos eu.Lorem ipsum dolor sit amet, his in labores patrioque. Melius reprimique consequuntur qui ea, fugit dicit nemore sea ea. Cibo legere ea nam. Odio nostrud vivendum vis id, meis debet recusabo pro te. Mei principes torquatos eu.Lorem ipsum dolor sit amet, his in labores patrioque. Melius reprimique consequuntur qui ea, fugit dicit nemore sea ea. Cibo legere ea nam. Odio nostrud vivendum vis id, meis debet recusabo pro te. Mei principes torquatos eu.Lorem ipsum dolor sit amet, his in labores patrioque. Melius reprimique consequuntur qui ea, fugit dicit nemore sea ea. Cibo legere ea nam. Odio nostrud vivendum vis id, meis debet recusabo pro te. Mei principes torquatos eu.Lorem ipsum dolor sit amet, his in labores patrioque. Melius reprimique consequuntur qui ea, fugit dicit nemore sea ea. Cibo legere ea nam. Odio nostrud vivendum vis id, meis debet recusabo pro te. Mei principes torquatos eu.Lorem ipsum dolor sit amet, his in labores patrioque. Melius reprimique consequuntur qui ea, fugit dicit nemore sea ea. Cibo legere ea nam. Odio nostrud vivendum vis id, meis debet recusabo pro te. Mei principes torquatos eu.
<br />
More Content
<br />
more
<br />
more
<br />
more
<br />
more
<br />
more
<br />
more
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment