<div class='header'>
</div>
body{
margin: 0;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
}
.header{
display: flex;
height: 45px;
width: 75vw;
background: red url("https://avatanplus.com/files/resources/original/5cd1ee39d2d7216a940a9208.jpg");
background-size: 75vw;
background-position: top center;
z-index: 1;
position: relative;
border-radius: 0 0 20px 20px;
}
.header:before {
content:'';
display: flex;
height: 60px;
width: calc( 100% - 10vw);
background: inherit;
background-size: inherit;
background-position: inherit;
z-index: -1;
margin: 0 5vw;
position: absolute;
border-radius: inherit;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.