Центрирование заднего фона

202

23 июня 2018, 20:30

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

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

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

<body>
<canvas id="canvas"></canvas></body>

Answer 1

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

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

Answer 2

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

Короче:

background-position: 50%,50%; //к примеру 50%.
background-size: 100%; // заполняет всего родителя.
background-position: fixed; //блокирует скролл.

Answer 3

body {
background: url(../img/my-img.jpg) no-repeat center;
background-size: cover;
}

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

table tfoot показывать на верху таблицы

Я читал в форуме о <tfoot> элементе, что он должен появиться после <thead> элементаИ все время его показывает внизу

220

HTML

Перенаправление на модальное окно

Есть html код:`

223

HTML

Фон блока не растягивается вместе с контентом самого блока. Помогите

У меня проблема с дивом "brya", я задаю ему background и все вроде бы хорошо, но фон не растягивается вместе с контентом который внутри дива, было пару...

208

HTML

Как лучше сделать такое меню

297