Create an adaptive background image - html

Question

I want to make text always inside the white block at any screen resolution?
Hence I don't want to add ant media queries for every 100px.
HTML
<div class="wrapper">
<div class="left-wrapper"></div>
<div class="right-wrapper">
<div class="conclusion-block">
<ul class="conclusion-list content-list">
<li>Sincerely yours,/Sincerely,</li>
<li>Best regards,/All the best,</li>
<li>Regards,</li>
<li>Thank you for your consideration,</li>
<li>Respectfully,</li>
</ul>
</div>
</div>
</div>
CSS
.wrapper {
display: flex
}
.left-wrapper {
width: 35%;
}
.right-wrapper {
width: 65%;
}
.conclusion-block {
background: url(https://i.imgur.com/NKTY6Du.png);
background-size: 100%;
background-repeat: no-repeat;
}
ul.conclusion-list {
padding-bottom: 75px;
padding-top: 40px;
padding-left: 100px;
}
.conclusion-list li {
font: 18px/33px Open Sans;
font-weight: 600;
letter-spacing: 0.18px;
color: #333333;
margin-bottom: 0;
}
emphasized text
https://i.imgur.com/7B53HH7.png
right image
https://i.imgur.com/16hTMJ4.png

Answer 1

Use absolute units on your background image, making it the same size regardless of screen size. I just played with some numbers in my snippet below. I also disabled word wrap, so the text stays inside the image at all times.
.wrapper {
display: flex
}
.left-wrapper {
width: 35%;
}
.right-wrapper {
width: 65%;
}
.conclusion-block {
background: url(https://i.imgur.com/NKTY6Du.png);
background-size: 550px;
background-repeat: no-repeat;
}
ul.conclusion-list {
padding-bottom: 75px;
padding-top: 40px;
padding-left: 100px;
}
.conclusion-list li {
font: 18px/33px Open Sans;
font-weight: 600;
letter-spacing: 0.18px;
color: #333333;
margin-bottom: 0;
white-space: nowrap;
}
<div class="wrapper">
<div class="left-wrapper"></div>
<div class="right-wrapper">
<div class="conclusion-block">
<ul class="conclusion-list content-list">
<li>Sincerely yours,/Sincerely,</li>
<li>Best regards,/All the best,</li>
<li>Regards,</li>
<li>Thank you for your consideration,</li>
<li>Respectfully,</li>
</ul>
</div>
</div>
</div>

Answer 2

Try transform: scale(1);
.wrapper { display: flex }
.left-wrapper { width: 35%; }
.right-wrapper { width: 65%; }
.conclusion-block { width: 550px; transform: scale(1); background: url(https://i.imgur.com/NKTY6Du.png); background-size: 100%; background-repeat: no-repeat; }
ul.conclusion-list { padding-bottom: 75px; padding-top: 40px; padding-left: 100px; }
.conclusion-list li { font: 18px/33px Open Sans; font-weight: 600; letter-spacing: 0.18px; color: #333333; margin-bottom: 0; white-space: nowrap; }
<div class="wrapper">
<div class="left-wrapper"></div>
<div class="right-wrapper">
<div class="conclusion-block">
<ul class="conclusion-list content-list">
<li>Sincerely yours,/Sincerely,</li>
<li>Best regards,/All the best,</li>
<li>Regards,</li>
<li>Thank you for your consideration,</li>
<li>Respectfully,</li>
</ul>
</div>
</div>
</div>

Answer 3

If you want to keep your background with only on image you can always try to make the text smaller/wider with vh size and change your padding with % so it can follow.
Here is an exemple:
html
<div class="wrapper">
<div class="left-wrapper"></div>
<div class="right-wrapper">
<div class="conclusion-block">
<ul class="conclusion-list content-list">
<li>Sincerely yours,/Sincerely,</li>
<li>Best regards,/All the best,</li>
<li>Regards,</li>
<li>Thank you for your consideration,</li>
<li>Respectfully,</li>
</ul>
</div>
</div>
</div>
css
.wrapper {
display: flex
}
.left-wrapper {
width: 35%;
}
.right-wrapper {
width: 65%;
}
.conclusion-block {
background: url(https://i.imgur.com/NKTY6Du.png);
background-size: 100%;
background-repeat: no-repeat;
}
ul.conclusion-list {
padding-bottom: 75px;
padding-top: 12%;
padding-left: 20%;
}
.conclusion-list li {
line-height: auto;
font-family: Open Sans;
font-size: 2.1vw;
font-weight: 600;
letter-spacing: 0.18px;
color: #333333;
margin-bottom: 0;
}
You can have a look:
https://jsfiddle.net/jeymchugh/x82aqwou/
Or you can try to separate your background in different pieces so it can stay appart, this would be a better solution.