0

Я хочу поместить все имеющиеся элементы текста внутрь фона так, чтобы они были адаптивными, как и сам фон. Я решил использовать фон(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;
}
1
  • обернуть картинку и текст в один блок, картинку на фон этого блока поставить и относительно блока позиционировать текст
    – ccxdec
    7 мая 2019 в 12:24

2 ответа 2

0

Если у вас сайт резиновый, или есть диапазоны адаптива где сайт резинится, то все плохо. Ваша задача сводится к тому, что размер шрифта зависит от ширины страницы и вообще говоря это совершенно разные вещи и связать их довольно таки не просто.

Можете попробовать связать font-size с шириной страницы используя единицы vw. Как-то так (значения и формула чисто для примера):

h1 {
  font-size: calc(30px + 100vw/5);
}

Больше деталей, например тут: https://css-tricks.com/snippets/css/fluid-typography/

0

Необходимо обернуть картинку и текст в один блок, картинку на фон этого блока поставить и относительно блока позиционировать текст. А на определенных разрешениях менять размер текста/отступы/положение и т.д.

*{margin: 0;padding:0;box-sizing: border-box;}
body {
  font-family: sans-serif;
  text-transform: uppercase;
  color: white;
  width: 100%;
}

.block {
  margin: 25px auto;
  position: relative;
  width: 600px;
  height: 400px;
  background: #ffbb00 url(https://images.unsplash.com/photo-1556888020-139220bbf85d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80) no-repeat center center;
}
h1 {
  font-size: 60px;
  position: absolute;
  top: 15px;
  left: 15px;
}
<div class="block background">
  <h1>
    <span>Always Be <br> Powerfull <br> for new <br> wins</span> 
  </h1>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.