Как выровнять фон по центру css
Перейти к содержимому

Как выровнять фон по центру css

  • автор:

Центрирование фона в CSS

Мне необходимо задать фон body так, чтобы центр фоновой картинки совпадал с центром экрана, при этом не сжимаясь при изменении размеров экрана. Есть ли возможность реализовать такое поведение фона на чистом CSS?

Отслеживать

задан 11 фев 2020 в 21:28

Ярослав Ясиницький Ярослав Ясиницький

123 8 8 бронзовых знаков

Можно, вариантов много. Но прежде покажите Вашу разметку. Иначе что лучше использовать в Вашем конкретном лучше — сложно сразу сказать.

11 фев 2020 в 21:32

@Denis640Kb разметка состоит из открывающегося и закрывающегося тэга body)

Как сдвинуть background image css

Для определения позиции изображения относительно родительского блока, используется свойство background-position. У данного свойства есть два значения, положение по горизонтали (может быть — left, center, right) и вертикали (может быть — top, center, bottom). Вместо использования ключевых слов, положение можно задавать в процентах, пикселах или других единицах. Если применяются ключевые слова, то порядок их следования не имеет значения, при процентной записи вначале задается положение рисунка по горизонтали, а затем, через пробел, положение по вертикали. Отношение между используемыми ключевыми словами и процентной записью следующее.

  • top left = left top = 0% 0% (в левом верхнем углу)
  • top = top center = center top = 50% 0% (по центру вверху)
  • left = left center = center left = 0% 50% (по левому краю и по центру)
  • bottom right = right bottom = 100% 100% (в правом нижнем углу)
body  /* путь до изображения*/ background-image: url(path_to_my_image.jpeg), /* позиционирование */ background-position: right bottom; > 

Выровнять фон по центру зв пределами родительского блока CSS

Author24 — интернет-сервис помощи студентам

День добрый. Помогите решить проблемку. Уже который час бьюсь, ничего не получается.
Есть контейнер у которого в CSS задана максимальная ширина 1000px и он выравнивается по центру экрана. Подскажите, пожалуйста, как можно внутри данного контейнера расположить дочерний с заданным задним фоном, который выходил бы за пределы родительского блока «container» и при этом тоже центрировался по центру экрана?
В общем нужно сделать так:

А у меня получается только так:

94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Выровнять элементы блока по центру
Добрый день, Есть в блоке 4 элемента, а именно <div .

Выравнивание родительского блока по центру без затрагивания контента внутри него
Верстал раньше на html 4 без применения <div> обходился таблицами и встраиванием в них классов css.

Как выровнять по центру вертикали в CSS?
Друзья, помогите выровнять текст в левой менюшке по центру вертикали. В Хроме всё выглядит.

Замена фона изображения под фон родительского блока
Здравствуйте. Подскажите, возможно ли решить следующую задачу. Имеется блок серого цвета. В него.

Помогите пожалуйста выровнять фон

Воспользовался советом уважаемого Пафнутия и сделал фон под картинки (thumb), но они все равно отображаются криво. Помогите пожалуйста выровнять их, сделать с равными отступами от краев. http://yaroslavaarte.ru/clients.html

Помогите пожалуйста выровнять фон

Ответа пока нет

3 комментария

Похожие вопросы

Вывод картинки в полной новости по центру

10.07.2011 ssaid Стили (CSS)

Как выровнять аттач и кнопки соц сетей

21.05.2013 Uralbox Шаблоны (TPL), Стили (CSS)

Как сместить блоки?

28.10.2013 xeon01 Шаблоны (TPL), Стили (CSS)

Выровнять плеер по нижней части сайта

18.04.2014 aebott Общие вопросы, Шаблоны (TPL), Стили (CSS)

Помогите пожалуйста с менюшкой JS+CSS

14.05.2014 Longer Стили (CSS), jQuery

Помогите пожалуйста со слайдом

Помогите с css выровнять не могу!

11.09.2014 Bodyak Шаблоны (TPL), Стили (CSS)

Выровнять текст в новости

20.10.2014 prolight Общие вопросы, Шаблоны (TPL), Стили (CSS), Ламерские вопросы

Как выровнять содержимое блока по центру?

23.03.2015 matro-skin Шаблоны (TPL), Стили (CSS)
Последние события
ushkom | Помогите выяснить почему не работает кэш . 2

Фото ushkom

ushkom
Помогите выяснить почему не работает кэш?
16-02-2024, 14:42
Большое спасибо. Все работает
dj-avtosh | Помогите выяснить почему не работает кэш . 2

Фото dj-avtosh

dj-avtosh
Помогите выяснить почему не работает кэш?
16-02-2024, 07:49

$cs = intval($_GET['cstart']); 

надо выше чем dle_cache для начала.
dj-avtosh | Где я допускаю ошибку в кэше? 16

Фото dj-avtosh

dj-avtosh
Где я допускаю ошибку в кэше?
15-02-2024, 09:57

 result['topusers'] = dle_cache('topusers', $config['skin'], true); ! empty($tpl->result['topusers']) && $tpl->result['topusers'] = json_decode($tpl->result['topusers'], true); if( !is_array($tpl->result['topusers']) ) { $limit = ! empty($limit) && is_scalar($limit) ? (int)$limit : 5; $tpl->result['topusers'] = $db->super_query("SELECT * FROM " . PREFIX . "_users WHERE `news_num` > '0' ORDER BY `news_num` DESC LIMIT " . $limit, true); $tpl->clear(); create_cache('topusers', json_encode($tpl->result['topusers'], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES ), $config['skin'], true); > 

dj-avtosh | Где я допускаю ошибку в кэше? 16

Фото dj-avtosh

dj-avtosh
Где я допускаю ошибку в кэше?
15-02-2024, 09:50

$tpl->result['topusers'] = []; while ($row = $db->get_row($sql)) { $tpl->result['topusers'][] = $row; > 

ushkom | Где я допускаю ошибку в кэше? 16

Фото ushkom

ushkom
Где я допускаю ошибку в кэше?
14-02-2024, 17:50
Всем большое спасибо. Разобрался. Может кому пригодится
Для просмотра содержимого спойлера, перейдите к выбранному событию.
ushkom | Где я допускаю ошибку в кэше? 16

Фото ushkom

ushkom
Где я допускаю ошибку в кэше?
14-02-2024, 17:26

Спасибо за ответ. Прописал ниже, все равно, кэш не хочет работать. Дело в том что в dle15 работало все нормально.

dj-avtosh | Где я допускаю ошибку в кэше? 16

Фото dj-avtosh

dj-avtosh
Где я допускаю ошибку в кэше?
14-02-2024, 16:21

$tpl->clear();

я думаю должен быть ниже create_cache
dj-avtosh | Яндекс начал мудрить с заголовками якобы . 5

Фото dj-avtosh

dj-avtosh
Яндекс начал мудрить с заголовками якобы MySQL Fatal Error, что за ерунда?
14-02-2024, 16:10

Через сохраненную копию можно посмотреть и тело ошибки
Апельсин | Яндекс начал мудрить с заголовками якобы . 5

Апельсин
Яндекс начал мудрить с заголовками якобы MySQL Fatal Error, что за ерунда?
12-02-2024, 03:11

Падает сервер. Вот и вся проблема.
deadluk | Перенести категории из правого блока в ш . 1

Фото deadluk

deadluk
Перенести категории из правого блока в шапку сайта
9-02-2024, 05:35
Пишите @p00psi tg

  • Перенести категории из правого бл… 1
  • Dle Профиль сделать 3
  • Адаптация для ДЛЕ 17 Мультивыбор … 5
  • Перенести функцию из загрузчика ф… 2
  • Добавление мерчанта (платежной си… 2
  • Куплю модуль «парсер актеров… 1
  • Cоздание сайтов (DLE) на тематику… 2
  • Настроить модуль WebShop 1
  • Доп. поле с выбором вариантов мет… 2
  • Вывод fullstory на главной страни… 6
  • Создание простого сайта отзывов (… 0
  • Кастомные стикер/смайлы для комме… 0
  • Бесконечная подгрузка полной ново… 0
  • Запоминание открытой вкладки и со… 0
  • Авторизация пользователей через Т… 0
  • GeoIP — показ информации в зависи… 0
  • Push-уведомление через OneSignal.… 0
  • Giphy for comments (TinyMCE) 4
  • Множественные опросы — модуль Mul… 0
  • Расширенные закладки 0

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *