Как увеличить фоновое изображение больше и сделать резиновую высоту

Общее
1

Всех с Наступающим. Помогите пжлст разобраться с версткой. Столкнулся с 2 проблемами:

  1. Размер фонового изображения.
    Подскажите, как увеличить размер фонового изображения на 20%. Надо, чтобы оно полностью отображалось. Если задаю фиксированные размеры или background-size: cover, то помещается только часть. А надо, чтобы целиком отображалось.

  2. Как правильно делать высоту резинового блока? Чтобы навигация и первый блок отображались во весь экран при любом разрешении. Делал height: 100% - не работает. Попробовал height: 100vh… Блок по высоте тянется, но контент не центруется по вертикали. Сделал флексбок, но все равно не центруется. Как сделать так, чтобы первый блок сайта был по высоте на один экран и тянулся при изменении размера?

Ссылка на песочницу

.

2

пока могу вот так помочь, дальше также можно допетрить. прост не очень понял что вы имели ввиду.

#1 BLOCK 
/* ===== #1 BLOCK =======*/
.main-container {
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;

  outline: 2px dashed orange;
}

.main_left {
  width: 40%;

  outline: 2px dashed green;
}

/*  НЕ РАБОТАЕТ  */
.main_right {
  width: 50%;
  min-height: 50%;
  background-image: url("https://startly.web3templates.com/demo/software/images/screen2.jpg");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: contain;
  
  outline: 2px dashed red;
}

обводку outline потом сами уберете, когда поймете так вам надо, или не так (на размерность она не влияет).
во втором блоке ширину li задайте относительно, например 25%.
объедините псевдоэлементы в одно правило, разные у них все равно только content, проще будет править потом.
и еще такое: не юзайте табуляцию для отступов =) очень уж бесяво, тем более что гугл советует уже давно на 2 пробельчика перейти.

3

Уухх, самое лучшее решение, что мне подсказали. Спасибо большое! С Новым годом :slight_smile:

Я сверстал весь лендинг (залил верстку в новую песочницу) и осталось несколько вопросов. Помогите пжлст с ними разобраться:

  1. Как лучше делать изображение в первом блоке: тегом img в html или все-таки фоном? Я в итоге сделал img вместо фона, как было в прошлой песочнице. Правильно это или лучше фоном?
    Я попробовал ваше решение из пункта 1 в текущей версии (предварительно удалив тег img) - и почему-то не отображался фон (картинка).

  2. Как отцентровать контент (текст и изображение) по высоте? И как сделать так, чтобы первый блок открывался во весь экран при любом разрешении. Сделал скрин для наглядности: https://prnt.sc/m1w2wk. Я вставил ваше решение с другим кодом в main_right, так как сейчас фон задан картинкой с тегом. Не получается отцентровать контент (

  3. Как правильно задаются отступы между блоками? Скрин для наглядности https://prnt.sc/m1w4nc. Я сейчас задаю в margin-top в пикселях. Правильно ли это? Как лучше?

  4. Как правильно задавать max-width: ко всему боди или к каждой секции? В моем случае все секции, кроме одной имеют одинаковый отступ при максимальном расширении - я задал ко всему body максимальню ширину. Но здесь вылезла проблема в последней секции: фон должен быть шире, чем все остальное и сейчас max-width его режет. Скрин https://prnt.sc/m1w53q. Как сделать так, чтобы фон выходил за значение max-width? Пробую его обнлить, но не помогает.

  5. Как сделать так, чтобы при клике на навигацию, блок открывался по центру экрана, а не как сейчас без отступов? Скрин: https://prnt.sc/m1w67y. Маргин не помогает, как я понимаю (

  6. Про табуляцию для отступов - не понимаю, как я ее сделал и как ее убрать )) Вы вот про это имеете в виду https://prnt.sc/m1w6jd? Хотел, кстати, спросить почему у меня все блоки не во всю ширину в инспекторе. Не понимаю, почему у других сайтов при заданной max-width - блок идет во всю ширину, а меня нет.

  7. И последний вопрос ) Как сделать так, чтобы при уменьшении ширины 2-ого блока, горизонтальные отступы до рамки не пропадали? Скрин: https://prnt.sc/m1w79u

Помогите пжлст разобраться в чем тут дело.

4

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

дебаг css 
* { outline: 2px dotted red; }
* * { outline: 2px dotted green; }
* * * { outline: 2px dotted orange; }
* * * * { outline: 2px dotted blue; }
* * * * * { outline: 1px solid red; }
* * * * * * { outline: 1px solid green; }
* * * * * * * { outline: 1px solid orange; }
* * * * * * * * { outline: 1px solid blue; }

  1. в лендинге лучше Img, причем задайте ему явно в html размеры, чтобы страница отрисовывалась заранее, до изображений. хотя если хотите адаптивности, то используйте префиксные формы для медиазапросов. https://codernote.ru/html/razmery-ekranov-dlya-adaptivnoj-verstki/

  2. по высоте хз, если адаптивно хотите. либо выбирайте десктопную высоту и собственно задайте явно.

  3. лучше впихивайте каждый семантический раздел в контейнер-центровщик с единым классом типа wrapper, который и ширину одинаковую для всех создаст и секцию от секции будет отделять внешним отступом.

остальное я либо не понимаю, либо уже сплю =) С Новым Годом! =)

6

Спасибо за оперативность! :slight_smile: