Позиционирование фонового изображения

Question

возникла проблема с позиционированием фонового изображение. Вернее, спозиционированно оно все хорошо, но для адаптации все плохо. Проще говоря, на экране меньше 1440px, все элементы изменяют свои размеры соответственно с заданными параметрами, а вот фоновое изображение остается во всю ширину экрана. Если что, изображение выровненно по центру через тег p text-align: center;. Так вот, по моему, все это дело решается через @media. Все бы ничего, но я не знаю как это сделать. К тому же, на фоновом изображение контентная часть находится справой стороны, слева там мало всего нужного и по сути вообще белый фон. Вроде как понятно объяснил, ну в общем, плиз хелп ми, иначе тенотен уже не поможет

Answer 1

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

Для начала стоит всё-таки установить фон, а не изображение. В CSS для этого существует свойство background-image, а также сопутствующие:

HTML

<div class="container">
  <p class="main-block">
    Content
  </p>
</div>

CSS

.container {
  width: 100%;
  height: 300px; /* Для наглядности */
  border: solid 3px yellowgreen;
  background-image: url(img/mainblock.jpg); /* Ссылка на фоновое изображение */
  background-repeat: no-repeat; /* Цикличность фона */
  background-position: center; /* Положение фона в блоке */
  background-size: cover; /* Размер фона */
}

.main-block {
  text-align: center;
  font-size: 50px;
}

Этот код расположит фон с сохранением пропорций по центру блока, чтобы блок полностью им покрывался:

При этом он никогда не будет вылезать за пределы div.

Советую почитать про каждое свойство, чтобы расположить фон так, как вам нужно. В CSS для этого есть всё необходимое.

БЛОГ НА HUSL

Позиционирование фонового изображения

Ответы (1 шт):