0

Возник вопрос, как имея картинку и ставя её на задний фон получить положение её центра в центре экрана пользователя.

Внизу привел 4 возможных случая: 1)Картинка совпадает по разрешению с экраном. 2)Картинка выше чем и экран и для сохранения центровки не показываться верхняя и нижняя часть.3)Картинка шире и уже боковые стороны урезаны. 4)Картинка больше по обеим осям и просто центрируется. и еще есть 5 возможный случай , когда картинка меньше чем размер экрана пользователя и в том случае она просто растягивается равномерно до заполнения всей области с центрировкой. Скролл блокирую.

Поверх всего этого будет тег canvas и в нем будет уже анимация.

Screen page

<body>
<canvas id="canvas"></canvas></body>
2
  • Центр картинки - (х/2;у/2). Где х и у координаты конечного угла картинки
    – Pashok
    1 июн 2018 в 14:45
  • Мне не центр нужен, а как адаптивно сделать, чтобы центр картинки совпадал с центров экрана пользователя 1 июн 2018 в 15:41

3 ответа 3

1

Смотри, можно так:

body {
  background: url(../img/img.jpg) no-repeat center top;
}
/*
  no-repeat - Картинка не будет повторяться много раз
  center - выравнивает картинку по горизонтали
  top - выравнивает картинку по вертикали
*/

0

Думаю тебе поможет background-position: x,y
Вместо X экспериментально подставляешь значение в процентах, при котором картинка находится по центру, с Y также.
Блокировка скролла - background-position: fixed
А также background-size: 100%

Короче:

background-position: 50%,50%; //к примеру 50%.
background-size: 100%; // заполняет всего родителя.
background-position: fixed; //блокирует скролл.
2
  • С каких пор оно в скобках?
    – Qwertiy
    5 июн 2018 в 17:19
  • Ни с каких) спасибо, что сказал
    – T0xee.n17
    5 июн 2018 в 18:25
0
body {
background: url(../img/my-img.jpg) no-repeat center;
background-size: cover;
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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