Layout: https://codepen.io/maxtor/pen/prwyvZ

.about-smartprogress { background-image: url(http://ico.smartprogress.do/img/index/bg-about-smartprogress.jpg); background-size: cover; background-position: 50%; background-repeat: no-repeat; height: 1000px; color: #fff; padding-top: 50px; padding-bottom: 35px; } .grant { width: 50%; margin: 580px auto 0; text-align: center; font-size: 1.3rem; font-weight: bold; line-height: 1.2rem; } .top { padding-bottom: 25%; } 
 <div class="about-smartprogress"> <div class="grant"> <div class="top"> В 2015 году мы получили<br/> грант Startup Chile </div> <div class="botom"> От правительства Чили </div> </div> </div>

Is it possible to position the text in div.grant in such a way that it is always tied to a specific place in the background image (it is necessary that the text in the block be located above and below the number 35.000, as in the background)? Now when you change the screen size, the text shifts and crawls onto the number.

  • In a nutshell: setting the background container by simulating the proportions of the background through vertical pseudo-element pedding can help (google how to make an adaptive square on css). And then indent the child text blocks based on the size of this adaptive container. The first thing that comes to mind. - mJeevas

2 answers 2

if you can move a picture from the background into the markup, you can:

 .about-smartprogress { position: relative; color: #fff; margin-top: 50px; margin-bottom: 35px; } .about-smartprogress img { width: 100%; height: auto; } .grant { width: 300px; position: absolute; top: 57%; left: calc(50% - 150px); height: 19%; text-align: center; font-size: 1.3rem; font-weight: bold; line-height: 1.2rem; } .bottom { position: absolute; left: 0; right: 0; bottom: 0; } 
 <div class="about-smartprogress"> <img src="http://ico.smartprogress.do/img/index/bg-about-smartprogress.jpg"> <div class="grant"> <div class="top"> В 2015 году мы получили<br/> грант Startup Chile </div> <div class="bottom"> От правительства Чили </div> </div> </div>

The only thing to choose font sizes for different screen widths, left indent and width of the grant block, respectively ...

     <div class="about-smartprogress"> <p class="top"> В 2015 году мы получили<br/> грант Startup Chile </p> <p class="bottom"> От правительства Чили </p> </div> * { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; } .about-smartprogress { background-image: url(http://ico.smartprogress.do/img/index/bg-about-smartprogress.jpg); background-size: 100% 100%; background-position: top; background-repeat: no-repeat; height: 800px; color: #fff; padding-top: 50px; padding-bottom: 35px; position: relative; } .top { position: absolute; top: 57%; left: calc(50% - 125px); width: 250px; height: auto; background-color: red; text-align: center; font-size: 1.3rem; font-weight: bold; } .bottom { position: absolute; left: calc(50% - 125px); bottom: 22%; width: 250px; height: auto; background-color: red; text-align: center; font-size: 1.3rem; font-weight: bold; }
    • background-size: 100% 100%; - Then the background starts to distort. It requires exactly the "cover" - Max