Адаптивный масштабируемый фон #1

(работает если высота блока фиксирована) height: 445px;

by Ivan Karkachev

HTML

<div>
  <div class="wrap">
    <span>Ваше предложение</span>
   </div>
</div>

CSS

* {
    padding: 0; 
    margin: 0;
    box-sizing:border-box;
}
div{
    width: 100%;
    background: url("https://st.fl.ru/images/landing/bg2.jpg") no-repeat center top;
    background-size: cover;
    height: 445px;
}
.wrap {
  display:block;
  position: absolute;
  left: 0;  top: 0;  right: 0;  bottom: 0;
  margin: auto;
 
  width:50%;
  height:10%;
  text-align:center;
 
  color:#fff;
  opacity:0.5;
  }
  span { 
    display:block;
    height:100%;
    
    background:black;
    border-left:30px solid green; /*transparent*/
		border-right:30px solid green; /*transparent*/
  }