JSFiddle - React, Tailwind, and code Playground

by seankoole

HTML

<!-- Set image as background image via css maintain AR -->
<div class='ex-1 parent'>
  <div class='child'>
  <h1>
  Hello
  </h1>
   <h1>
  Hello
  </h1>
   <h1>
  Hello
  </h1>
   <h1>
  Hello
  </h1>
   <h1>
  Hello
  </h1>

  </div>
</div>

<!-- set image as background image: set fixed height -->
<div class='ex-2 parent'>
  <div class='child'>
  <h1>
  World
  </h1>
  </div>
</div>


<!-- <picture class='ex-3 parent'>
 <img src="https://cdn.pixabay.com/photo/2018/01/14/23/12/nature-3082832__340.jpg";/>
 <div>
Some Content
 </div>
</picture> -->

<picture>
 <source srcset="https://placehold.it/1600x900"
            media="(min-width: 747px)">
    <img src="https://placehold.it/800x450"; />
    <figcaption>
      <h1>
      Hi There
      </h1>
    </figcaption>
</picture>

SCSS

/* with aspect ratio */
.ex-1.parent {
  background-image: url('https://fanboxio.github.io/headglitch.com/public/images/home/home-bg-header.jpg');
  height: 0;
  width: 100%;
  Background-repeat: no-repeat;
  Background-size: cover;
  background-position:center center;
  padding-bottom: 66.6666667%; //apsect-ratio 1.5
  position: relative;

  .child {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    color: white;
    flex-direction:column;
    height:100%
  }
}

.parent + .parent{
  margin-top:10px;
}

/* Set Fixed Height for parent division */

.ex-2.parent{
   background-image: url('https://cdn.pixabay.com/photo/2018/01/14/23/12/nature-3082832__340.jpg');
   height:200px;
   width:100%;
   background-position:center center;
   background-size:cover;
   background-repeat:no-repeat;
   display:flex;
   justify-content:center;
   align-items:center;
   color:white;
   margin-bottom:10px
}

/* using image tag */
picture{
  position:relative;
  img{
    width:100%
  }
  div{
    color:red;
    display:flex;
    justify-content:center;
    align-items:center;
    height:100%;
  }
}

/* With Grid */
picture{
  position:relative;
  display:grid;
  place-items:center;
  figcaption{
    color:white;
    position:absolute;
    top:50%;
    left:50%;
    width:100%;
    transform:translate(-50%, -50%);
    h1{
      text-align:center
    }
  }
  }