Please advise how it is more correct to impose such 
block with bonuses for adaptive formats? This image will be a button. (There will be 3 on the page located horizontally) I am most confused by the translucent font that will be depending on the text (example 500grn, $ 20, 5000r ...) and this font should be on the whole block when decreasing browser screen.
.btn_top { position: relative; margin: 10px auto 0; width: 100%; min-height: 284px; box-sizing: border-box; font-size: 0; text-align: center; color: #fff; background: transparent no-repeat 50% 50%; } .btn_top img { display: inline-block; } .btn_top span { display: inline-block; color: #fff; font-size: 30px; line-height: 45px; } .btn_top:hover, .btn_top:focus { outline: none; } .btn_top__cart2:before { content: "бонус 500"; position: absolute; top: 0; left: 0; font-size: 1em; line-height: 1; text-transform: uppercase; color: #fff; opacity: 1; z-index: 5; } .btn_top__cart2 { box-shadow: 0 -8px 30px rgba(164, 221, 48, 0.35), 0 34px 48px rgba(0, 0, 0, 0.33); background-color: #54b228; } <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <div class="col-md-4"> <button class="btn_top btn_top__cart2" type="button" data-href=""> <img src="https://i.stack.imgur.com/3HjKE.png" alt="foto2"> <span>БЕЗДЕПОЗИТНЫЙ</span><span> БОНУС 500 ГРН</span> </button> </div> </div> 