Установка фона для контейнера

123
05 ноября 2021, 12:10

Прошу помощи в следующей задаче: Хочу реализовать адаптивную секцию с текстом и изображением 50/50 на полный экран. Желательно в CSS самым элементарным способом.

Сайт для примера: (вторая секция вниз) https://www.quay.com.au

Проблема: Не могу установить ни фон, ни картинку для правой секции.

Answer 1

*{ 
  padding: 0; 
  margin: 0; 
} 
 
.d{ 
  display: -webkit-flex; 
  display: -moz-flex; 
  display: -ms-flex; 
  display: -o-flex; 
  display: flex; 
} 
 
.text{ 
  background-color: tomato; 
    width: 50vw; 
   height: 50vw; 
   font-size: 120px; 
   display: -webkit-flex; 
   display: -moz-flex; 
   display: -ms-flex; 
   display: -o-flex; 
   display: flex; 
   justify-content: center; 
   -ms-align-items: center; 
   align-items: center; 
} 
 
.p{ 
  background-image: url('data:image/jpeg;base64,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'); 
  -webkit-background-size: contain; 
  background-size: contain; 
   width: 50vw; 
   height: 50vw; 
 
}
<div class="d"> 
   <div class="text">text</div> 
  <div class="p"></div> 
 </div>

Answer 2

Bootstrap, разделить, и тогда на каждый блок добавить свой дизайн, а так же можно создать подблоки, для текста

READ ALSO
Не отображается favicon в google [закрыт]

Не отображается favicon в google [закрыт]

Хотите улучшить этот вопрос? Обновите вопрос так, чтобы он вписывался в тематику Stack Overflow на русском

134
Простые числа в двумерном массиве?

Простые числа в двумерном массиве?

Дан двумерный массивВозвести в квадрат все простые числа

118
Как правильно работать с объектом класса в другом классе?C++

Как правильно работать с объектом класса в другом классе?C++

ИтакПередача объекта класса Pri в класс Event происходит успешно

165
Не могу понять как работает QPainterPath в Qt

Не могу понять как работает QPainterPath в Qt

Разбираюсь с рисовкой в Qt, пытаюсь нарисовать свою графическую фигуру, используя QPainterPathДля этого создаю класс class PuzzlePiece : public QGraphicsPathItem

140