JSFiddle - React, Tailwind, and code Playground

by Alex___Yang

HTML

<div class="main2">
    <div class="content">
        <h2>This is for test no pseudo element</h2>
         
    </div>
    <div class='image'> </div>   
</div>

<div class="main">
    <h2>This is for test pseudo element</h2>
</div>

CSS

.main {
    height:500px;
    background-color:#333333;
    position:relative;
}

h2 {
    padding: 3em 0 1em 0;
    margin-top:0px;
    text-transform: uppercase;
    color: white;
    text-align: center;
        
}

.main:after {
    content:'';
    opacity:.3;  
    background: url("http://icodeit.org/3-pages-in-3-weeks/images/hero-1-resized.jpg") no-repeat;
    background-size:100%;
    position:absolute;
    width:100%;
    height:100%;
    top:0;
}

/* ======================= */

.main2 {
    position: relative;
    height:500px;
    width:100%;
}

.image {
    top:0;
    left:0;
    width:100%;
    height:500px;
    position: absolute;
    opacity:.3;  
    background: url("http://icodeit.org/3-pages-in-3-weeks/images/hero-1-resized.jpg");
    background-size:100%;
}

.content {
    height:500px;
    width:100%;
    background-color:#333333;
}