Please tell me how to place these three pictures in the same way, and even adaptively (to reduce their size or what?) I’ll fight and I don’t understand. The text in them, as I understand it, is realized through the span, but this is still half the trouble. Here is the actual header page It consists of 3 parts, a red block, a blue block with a height to the beginning of the screen and a picture on the left.

.header__left__blue { position: fixed; border-radius: 10px; padding-top: 12px; } .header__left__red { position: relative; } 
 <div class="container"> <div class="row"> <div class="col-lg-6"> <div class="header__blue"> <img src="headerBlue.png" alt="spendcashback" class="img-responsive header__left__blue justify-content-lg-start"> <span></span> </div> <div class="header__red"> <img src="headerRed.png" alt="cashback" class="header__left__red justify-content-lg-start"> <span></span> </div> </div> <div class="col-lg-6"> <img src="headerVelo.png" alt="velotrack" class="header__right justify-content-lg-end"> </div> </div> </div>

the output is - enter image description here

For a more detailed understanding of the pictures on the left - enter image description here

I would be incredibly grateful!

  • one
    Download the code with pictures so that they work in it. - Vladimir Rodichev 9:16 pm
  • codepen.io/topicstarter/pen/PLeBeG - a little bit of refinement , fonts - MaximLensky
  • What is the point in the shaded left side? - CbIPoK2513

1 answer 1

enter image description here

enter image description here

enter image description here

 <style> .site { width: 990px; margin: 0 auto; } .shapka { width: 990px; height: 329px; border-radius: 11px; /* background-color: #005aab; */ position: relative; overflow: hidden; margin-top: 23px; } .rs { width: 659px; height: 329px; position: absolute; right: 0; top: 0; bottom: 0; z-index: 2; background: url(https://i.stack.imgur.com/esdCM.png); background-repeat: no-repeat; background-size: contain; } .ls { width: auto; height: 329px; position: relative; display: inline-block; } .imgred { width: 573px; height: 221px; background-color: #e3000c; background: url(https://i.stack.imgur.com/wyrgV.png); background-repeat: no-repeat; background-size: contain; position: absolute; top: 0; left: 0; z-index: 8; } .imgblue { width: 539px; height: 317px; background-color: #005aab; background: url(https://i.stack.imgur.com/DVenb.png); background-repeat: no-repeat; background-size: contain; position: absolute; bottom: 0; left: 0; z-index: 4; } </style> <div class="site"> <div class="shapka"> <div class="ls"> <div class="imgred"></div> <div class="imgblue"></div> </div> <div class="rs"></div> </div> </div>

  • Adaptively I can not .. image . - CbIPoK2513
  • @ CbIPoK2513 There is no adaptation. To make it, you need to come up with a design first to adapt such that it is convenient to read / watch. Do you want to do it. - Vladimir Rodichev
  • The solution from vladimira rodicheva helped, but why are the pictures attached via the bck ground url and not through img? - Glory