Flexible Responsive Background Image

flexible-responsive-background-image.markdown

Flexible Responsive Background Image

A Pen by Milorad on CodePen.

License.

index.html

<div class="banner">
    <picture>
      <!-- Picture on large screens-->
      <source media="(min-width: 1200px)" srcset="https://wallpapercave.com/wp/wp1902571.png">
      <!-- Picture on tablet screens-->
      <source media="(min-width: 768px)" srcset="https://wallpapercave.com/wp/wp1902584.png">
      <!-- Picture on screens less than 768px width-->
      <img class="has-cover" src="https://wallpapercave.com/wp/wp1902574.png" alt="">
    </picture>
    <div class="banner__content">
        <div class="banner__content__breadcrumbs">
            <span class="banner__content__breadcrumbs-item">Home</span>
            <span class="banner__content__breadcrumbs-item banner__content__breadcrumbs-item--active">About us</span>
        </div>
        <h2 class="banner__content__title section-title">About Us</h2>
        <div class="entry-content">
            <p>Try resizing your browser window. Breakpoints are on 1200px and 768px</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit minima voluptatum quibusdam, molestias aspernatur quas nemo, ullam deserunt impedit rem repellendus aut eveniet omnis voluptatem, reprehenderit accusamus perspiciatis maiores laborum. Doloremque, asperiores fuga quis praesentium dolores laudantium labore ex cum eius maiores placeat corrupti iusto natus aspernatur perspiciatis doloribus animi tenetur.</p>
        </div>
    </div>
</div>

style.scss

body {
  padding: 0;
  margin: 0;
}
.banner {
  position: relative;
  display: flex;
  padding: 0 15px;
  min-height: 725px;
  color: #fff;
  overflow: hidden;
  picture {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
  }
}
.banner__content {
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    align-self: center;
    text-align: center;
}
.banner__content__breadcrumbs {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
    color: #fa6c49;
}
.banner__content__breadcrumbs-item {
  &::after {
    content: '/';
    display: inline-block;
    margin: 0 5px;
  }
  &:last-child {
    &::after {
      display: none;
    }
  }
}
.banner__content__title {
    font-family: "Gotham";
    font-weight: 900;
    text-transform: uppercase;
}
.banner__content__title::after {
    content: '';
    display: block;
    width: 115px;
    height: 5px;
    background-color: #fa6c49;
    margin: 20px auto 25px;
}

.entry-content {
  p {
    font-size: 20px;
    line-height: 1.6;
  }
}

.has-cover {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.1);
    min-width: 1000%;
    min-height: 1000%;
    max-width: none;
}