1

Как сделать адаптивным фон для сайта и выровнять блок по горизонтали и вертикали.

body {
  width: 100%;
  height: auto;
  background-image: url("//picsum.photos/560/560");
  /** "http://bestfons.ru/_ph/24/985579237.jpg" **/
  background-repeat: no-repeat;
}

.modal {
  width: 552px;
  height: 420px;
  background-color: #fff;
  border-radius: 3px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
<div class="modal"></div>

2
  • конкретно фон нужно сделать адаптивным 1 июл 2018 в 16:30
  • Добро пожаловать ru.stackoverflow! Если решение было вам полезно, то отметьте ответ галочкой, около цифры 3 июл 2018 в 6:50

1 ответ 1

1

*{
  box-sizing:border-box;
}
body {
  width: 100%;
  background-image: url("//picsum.photos/560/560");
  background-repeat: no-repeat;
  background-size:cover; /* вписать фон в размеры с сохранением пропорций */
  min-height:100vh;
  margin:0;
  padding:15px;
}

.modal {
  width: 552px;
  max-width:100%;
  height: 420px;
  max-height:100%;
  background-color: #fff;
  border-radius: 3px;
  /*выравнивание модального окна по центру*/
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
<div class="modal"></div>

2
  • Спасибо! Работает дай Вам Бог здоровья 1 июл 2018 в 17:27
  • это же модальное окно?
    – Randall
    3 июл 2018 в 6:54

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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