Как сделать задний фон на весь экран html
У меня все обернуто в контейнер, у которого определенная ширина. Но есть блок, который занимает всю ширину экрана. Я новичок и не особо понимаю как так сделать. Я пытаюсь сделать еще адаптив, если это как-то повлияет. Вот ccs контейнера
.container
Отслеживать
задан 6 апр 2022 в 16:14
125 1 1 серебряный знак 7 7 бронзовых знаков
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
.container для контента основного должен быть одинаковый
.container для header должен быть просто побольше
*, *::before, *::after < box-sizing: inherit; >html < box-sizing: border-box; >body < margin: 0; font-size: 30px; font-family: sans-serif; >.container < max-width: 600px; padding: 0 15px; margin: 0 auto; width: 100%; display: block; >.container_header < max-width: 800px; >.header < padding: 30px 0; background-color: orange; >.section < background-color: grey; padding: 80px 0; >.section__wrapper, .header__wrapper < display: flex; flex-direction: column; gap: 20px; >.block
Header Content Content Content Урок 28. Неподвижный фон, прописанный с помощью стилей CSS. Размножающаяся и не размножающаяся картинка фона
При установке неподвижной картинки фона под таблицу, в которой у нас будет располагаться текст и прочая полезная информация, создаётся следующий эффект: при прокрутке таблицы с текстом фон под ней остаётся неподвижным, а не сдвигается вместе с таблицей. Как здесь: здесь
Подобный эффект может создать некоторую иллюзию двуслойности, некоего пространства на ваших страницах.
Обычно эффекта неподвижной картинки фона добиваются с помощью постановки в таблицу стилей CSS следующих атрибутов: background-attachment: fixed; Речь идёт о таблице стилей CSS, которая у вас находится в отдельном документе с расширением .css
Есть несколько способов установить то, что нам нужно.
Выбираем картинку, которая будет у нас фоном. В данном случае я беру вот такую картинку (кликните по миниатюре, чтобы увидеть полный размер):
В документ стилей css, туда, где задаём параметры для BODY, вставляем такую конструкцию:
В данном случае мы берём в качестве картинки фона большое изображение во весь экран (например, 1280 на 1024 px).
Примечание: Если у вас нет документа стилей css, то вам необходимо создать его, как указано в Уроке 8 — и прописать ссылку на документ стилей css в коде своей html-страницы, как указано в этом же уроке.
Итак, вот какие параметры мы задаём при помощи стилей:
— background-image: url(адрес картинки фона); — прописываем адрес нашей фоновой картинки 1280 на 1024 px.
— background-attachment: fixed; — задаём фону указание оставаться фиксированным, то есть, неподвижным.
— background-repeat: no-repeat; — задаём фону указание не размножаться.
— background-position: top; — задаём позицию фоновой картинке: устанавливаться по верхнему краю страницы.
Итак, мы вставили в документ стилей css, в BODY, вот эту конструкцию:
Я создала простую таблицу на 70 % экрана и поместила в ней текст и две картинки для наглядности. Вот что у нас получилось на странице: ПРИМЕР (чтобы увидеть эффект неподвижного фона, покрутите страницу вниз-вверх).
Попробуем поставить маленькую картинку, которая будет автоматически повторяться и заполнять всё пространство страницы, образовывая узор фона. Вот эта картинка:
При этом мы фиксируем весь фон, прописывая в таблице стилей css вот такую конструкцию:
Здесь мы задали только параметр: background-attachment: fixed; — то есть, прописали указание браузеру сделать фоновую картинку неподвижной. Поскольку мы не сказали картинке «не размножаться» — она должна у нас размножиться на весь экран.
Получится вот что: ПРИМЕР
Попробуем установить фоновую картинку с одной стороны, а таблицу с текстом и картинками на странице расположить с противоположной стороны, чтобы она не загораживала собой фоновую картинку. Для этого пропишем в документе css следующее:
— background:#e0ddd8 url(адрес фоновой картинки) — цвет под фоновой картинкой — бежевый, под цвет фона самой картинки. Это делается для того, чтобы не видно было перехода нашей картинки в фон (картинка занимает только часть экрана).
— no-repeat — картинка не размножается (стоит одна большая картинка с одним из моих любимых американских актёров — Робертом Дювалем).
— fixed — фон зафиксирован, то есть неподвижный.
— left top — выровнен по левому верхнему краю экрана (можно поставить картинку справа, а таблицу сайта — слева, как вы пожелаете. Для этого в документе html в таблице вы пропишете:
Как сделать картинку во весь экран шапки ?
Здравствуйте, у меня небольшая проблема картинку получилось вставить в сайт, но не могу сделать во весь экран и хочу заменить её вместо синего фона.
6 ответов
.img-wrap < position: relative; >.img-wrap h1 < position: absolute; left: 250px; bottom: 200px; width: 100%; color: #800000; >.img-wrap h2
спасибо за ответ
а это надо писать в коде или в стиле
images можно убрать из div и переместить его в стили, а диву дать примерно такие стили:
background-image: url('../img/background.png'); background-repeat: no-repeat; background-position: center center; background-attachment: fixed; -o-background-size: 100% 100%, auto; -moz-background-size: 100% 100%, auto; -webkit-background-size: 100% 100%, auto; background-size: 100% 100%, auto;В стилях где будет картинка
Sign up or Log in to write an answer
- Интерактивные уроки и курсы программирования и создания сайтов (дистанционное обучение) помогут вам в игровой форме изучить основы языков программирования веб-разработки и веб-программирования с нуля. Обучение онлайн 24/7.
Общие ссылки
- Отзывы
- Политика конфидециальности
- Условия использования
- Блог
- Цена и оплата
- Курсы и скринкасты
- Сертификаты
- Партнерская программа
- Комьюнити
Наши курсы и скринкасты
- HTML/CSS Advanced
- Bootstrap 4
- Vue JS
- Linux, GIT and web-hosting
- HTML and CSS
- Modern Javascript
- Javascript/jQuery
- Codeigniter
- Все курсы и скринкасты
Как растянуть цвет фона на весь экран?
Цвет фона ограничивается шириной контейнера, можно ли растянуть фон на весь экран не вынося его из контейнера?
.container < max-width: 1170px; margin: 0px auto; >.block__grey
- Вопрос задан более двух лет назад
- 2595 просмотров
2 комментария
Простой 2 комментария
Это пошло поколение быдлокодеров, еще хуже предыдущего)))
Читаем для начала азы css, html