Адаптивное фоновое изображение? - PullRequest
Новая
       47

Адаптивное фоновое изображение?

0 голосов
/ 03 марта 2020

Я создаю веб-страницу, и я очень плохо знаком с адаптивным дизайном. У меня есть область области содержимого длиной 100%, и я добавил фоновое изображение с правой стороны, чтобы закрыть всю правую половину области содержимого. Слева я хотел бы добавить текст и тому подобное.

Однако в настоящее время, если я перевожу его на мобильный размер, фоновое изображение сжимается из-за моего текущего размера фона, равного "50%". Кроме того, текст накладывается на изображение.

Каков наилучший способ сделать это, когда у меня может быть текст слева, а мое изображение справа (полностью закрывая поле контента без полей)

Ниже приведен мой базовый c код: 


<style>
.FirstRow {
  background-image: url("https://miro.medium.com/max/9792/1*-xHF1a7BT8hN8KsHbQCDSw.jpeg"); 
  background-position: right;
  background-color: #f1f1f1;
  background-repeat: no-repeat;
  background-size: 50%;}

.firstrowpad {
  padding-top:0px; 
  height: 50%; 
  padding-bottom:0px;}

.HeaderFont {
  font-size: 2em; 
  left: 15%; 
  top: 15%; 
  position: absolute;}

</style>

<div class="FirstRow firstrowpad">

 <div class="HeaderFont">
    <center>  
     ❝ A dining experience <br>in the comfort of <br>your own home. ❞
     </center>

</div>
</div>

Я хочу, чтобы при сжатии на мобильный фоновое изображение было полностью видимым без полосы прокрутки (но меньше), а текст сворачивался под ним.

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

Спасибо за помощь.

Джен Т

РЕДАКТИРОВАТЬ: 


@media screen and (max-width: 1024px) { /* Specific to this particular image */
  .FirstRow {
    background-size: 100%;
  }
}

Это исправило проблему с изображением, но как я могу получить текст, чтобы свернуться ниже?

Спасибо

...