Я хочу поместить все имеющиеся элементы текста внутрь фона так, чтобы они были адаптивными, как и сам фон. Я решил использовать фон(background-image) вместо картинки для того, чтобы все элементы текста были внутри фона и при изменении размера ширины сайта, или его масштаба всё стояло на своих местах(полностью адаптивный фон, который бы подстраивался под любые размеры, текст чтобы никуда не съезжал и сохранял свои размеры при изменении размера сайта при этом находился внутри фона.
Вот как должно все выглядеть при любых размерах сайта:
Здесь я использовал картинку, а не фон.
Элементам текста я задал position: absolute
Все выглядит неплохо, если не изменять ширину или масштаб сайта
А так, если например поменять масштаб получается вот это
Здесь масштаб 50%. И все пошло по *****
Я уже долго ломаю голову, как все это можно уместить. Буду очень благодарен и признателен за ответ!!!
HTML код:
<main>
<div class="Block_image"><div class="FLRBK2_img">
<h1 class="MainText"><span>Always Be <br> Powerfull <br> for new <br> wins</span> </h1>
<div class="ReadMore">
<p>Read More</p>
<div id="RArrow" style="background-image: url(../Images/Adidas/right_arrow.png);"></div>
</div>
<div class="AboutRBK">
<p id="NameFlorens">Florens RBK <span>2</span></p>
<p id="Property">New comfortable material for new wins</p>
<button id="Buy"><p>By Now</p></button>
</div>
</div>
</div>
</main>
CSS код:
.Block_image {
margin-top: 8px;
margin-right: 40px;
margin-left: 40px;
text-align: center;
position: relative;
}
.FLRBK2_img {
background-image: url(../Images/Adidas/Florens_RBK2.jpg);
background-size: contain;
background-repeat: no-repeat;
max-width: 100%;
}
.MainText span {
text-transform: uppercase;
position: absolute;
float: left;
top: 130px;
left: 240px;
text-align: left;
width: 100%;
font-family: "Anton", cursive;
font-size: 4.79vw;
color: rgba(14, 14, 14, 0.7);
text-shadow: 1px 4px 6px rgba(0, 0, 0, 0.35);
}
.ReadMore {
position: absolute;
}
.ReadMore #RArrow {
display: inline-block;
background-size: cover;
background-repeat: no-repeat;
width: 20px;
height: 20px;
text-align: center;
}
.ReadMore {
left: 78%;
top: 146px;
}
.ReadMore p {
display: inline-block;
font-family: "PT Sans Caption";
font-style: normal;
font-weight: bold;
font-size: 1.45vw;
color: #000000;
text-shadow: 1px 2px 6px rgba(0, 0, 0, 0.25);
}
.ReadMore p:hover {
cursor: pointer;
text-decoration: underline;
}
.ReadMore p:active {
color: white;
opacity: 0.8;
}
.AboutRBK {
left: 70%;
top: 650px;
position: absolute;
text-align: center;
}
.AboutRBK #NameFlorens {
font-family: Anton;
font-size: 64px;
line-height: 94px;
color: white;
text-shadow: 0px 4px 6px rgba(0, 0, 0, 0.25);
right: 50px;
}
#Property {
margin-top: 5px;
font-family: "PT Sans Caption";
font-weight: bold;
font-size: 18px;
color: #FFFFFF;
text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
}
#Buy {
margin-top: 20px;
border: none;
width: 165px;
height: 60px;
background: #FFFFFF;
border-radius: 10px;
-webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.35);
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.35);
cursor: pointer;
}
#Buy p {
font-family: "Anton";
font-size: 28px;
color: #000000;
}
#Buy:hover {
text-decoration: underline;
}
#Buy:active {
background-color: black;
}
#Buy p:active {
color: white;
}