Skip to content

Instantly share code, notes, and snippets.

@kbzaso
Forked from adamdehaven/bgimage.css
Created May 4, 2018 13:41
Show Gist options
  • Save kbzaso/ba28fbe599d2f3834de3424821746763 to your computer and use it in GitHub Desktop.
Save kbzaso/ba28fbe599d2f3834de3424821746763 to your computer and use it in GitHub Desktop.
Bootstrap full-width hero section with text and image
.bgimage {
width:100%;
height:500px;
background: url('https://images.unsplash.com/photo-1438109491414-7198515b166b?q=80&fm=jpg&s=cbdabf7a79c087a0b060670a6d79726c');
background-repeat: no-repeat;
background-position: center;
background-size:cover;
background-attachment: fixed;
}
.bgimage h5 {
color:white;
text-shadow:2px 2px #333;
}
<section class="bgimage">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h5>Hello, world! Full width Hero-unit header</h5>
<p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a href="#" class="btn btn-primary btn-large">Learn more »</a></p>
</div>
</div>
</div>
</section>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment