Css как растянуть фон на весь экран: Как растянуть фон на всю ширину окна?

<дел>

Растянуть фон!

Этот текст отображается перед фоновым изображением. Это потому что мы использовали CSS для размещения содержимого перед фоновым изображением. фоновое изображение будет растягиваться, чтобы соответствовать окну вашего браузера. Вы можете увидеть изображение увеличивается и уменьшается по мере изменения размера окна браузера.

Давай, попробуй - измени размер браузера!

Затем все, что нам нужно сделать, это закрыть тег и тег :

Посмотреть результат

CSS и CSS3 Полноэкранное фоновое изображение — Dreamweaver CS6 — Photoshop и Illustrator Tutorials

1.

2. Техника CSS: Поместите изображение

С помощью простой техники CSS нам нужно сначала разместить наше изображение, которое будет фоновым изображением. Чтобы поместить это в нужное место, давайте перейдем в представление «Код» и перетащим наше фоновое изображение с панели «Файлы» в первую строку под открывающим тегом «body».

3. Назначьте идентификатор изображению

Перейдите в представление «Дизайн» и выберите это большое изображение, которое, вероятно, будет покрывать все (вы можете прокрутить вниз, чтобы увидеть свой веб-сайт под этим изображением, если вы беспокоитесь), и как только вы Вы выбрали изображение, посмотрите на панель «Свойства» и дайте этому изображению идентификатор «fsbg», который будет нашей маленькой аббревиатурой от «полноэкранный фон».

4. Начните добавлять CSS

Мы воспользуемся инструментами Dreamweaver для добавления CSS и добавим CSS прямо в этот документ. Если вы достаточно продвинуты, чтобы писать CSS и/или использовать внешний файл CSS, это замечательно и настоятельно рекомендуется, но здесь мы не будем усложнять. Перейдите в «Окно»> «Стили CSS», чтобы открыть панель CSS, и нажмите маленькую кнопку «Добавить новое правило CSS» в правом нижнем углу панели.

5. Целевой идентификатор с помощью CSS

В диалоговом окне «Новое правило CSS» мы хотим установить тип селектора «ID», а затем установить идентификатор «#fsbg» и определение правила как «(Этот документ Только)". Это поместит код CSS на нашу страницу здесь и нацелит любой элемент HTML с идентификатором «fsbg».

6. Масштабирование фона с пропорциями

Выберите опцию «Коробка» и установите ширину на «100%», а высоту — на «Авто». Нажмите кнопку «Применить» и перейдите к следующему шагу.

7. Зафиксируйте фон на месте с помощью позиционирования

Затем выберите параметр «Положение» и установите для параметров «Сверху» и «Слева» значение «0» — это всегда прижимает изображение к верхнему левому углу. Также установите для параметра Position значение «fixed» — это позволит нашему контенту прокручиваться по фоновому изображению. Наконец, установите Z-индекс на «-100» — это подтолкнет фон «под» всем остальным контентом, чтобы наш веб-сайт располагался «поверх» нашего фона. Нажмите «ОК», чтобы зафиксировать изменения.

8. Добавление свойств CSS вручную

Нам все еще нужно добавить два небольших фрагмента CSS. Вернитесь в нашу панель CSS, нажмите кнопку ссылки «Добавить свойство» и добавьте следующие свойства: «min-height» установите на «100%», это гарантирует, что наше изображение заполнит область экрана сверху вниз. Также добавьте свойство «min-width», установленное на «1040px», это ширина оболочки на моем сайте, поэтому я всегда хочу, чтобы фоновое изображение было как минимум такой же ширины. Обратитесь к моему скриншоту, если у вас есть вопросы о том, что и где вы печатаете.

9. Предварительный просмотр в браузере

Нажмите «F12» для предварительного просмотра в браузере и проверки. Измените размер окна браузера и посмотрите, как изменится фон.

10. Этот метод работает в этих браузерах

Эта версия отлично подходит для Google Chrome, Mozilla Firefox, Opera и Safari. Он также работает в IE7, 8 и 9.

11. Техника CSS3

Теперь мы собираемся использовать более современную и быструю технику, которая использует CSS3, и мы также напишем наш CSS во внешнем файле CSS с помощью рука. Давайте повеселимся с этим. Мы используем технику, которую можно найти на CSS-Tricks.com, спасибо Крису и его замечательному сайту!

12. Прикрепите фоновое изображение

Начните с нацеливания тега «тело» с помощью CSS и прикрепите фоновое изображение, и мы установили фон, чтобы он не повторялся, был центрирован по горизонтали и вертикали, и он также установлен в фиксированное положение.
[code type="css" title="Code"]body {
background: url(../images/fullscreen-bg.jpg) исправлен центр без повторов;
}
[/code]

13. Задайте размер фона CSS3

Теперь мы собираемся использовать «размер фона», чтобы указать, что это изображение должно покрывать всю область экрана. Мы дублируем «размер фона» с префиксом для Safari и Chrome (-webkit-), затем снова с префиксом для Firefox (-moz-), а затем снова с префиксом для Opera (-o-). Первоначальный «фоновый размер» подходит почти для всех современных браузеров, но мы все же хотим быть конкретными для более старых версий этих браузеров.
[code type="css" title="Code"]-webkit-background-size: обложка; /*Используется Safari и Chrome*/
-moz-background-size: cover; /* Используется Firefox */
-o-background-size: cover; /* Используется Opera */
background-size: cover; /* Все современные браузеры */
[/code]

14. Этот метод работает в следующих браузерах

Эта версия отлично подходит для Google Chrome, Mozilla Firefox 3.