Как сделать фон картинкой

Очень часто страницы сайта делают с фоном в виде картинки. И я регулярно получаю вопросы о том, как это сделать. Поскольку ответить одним словом здесь не получится (новички не поймут, а опытные и так это знают), я и решил рассказать в этой статье, как сделать фон картинкой.

Существует 3 основных варианта фона: градиент по горизонтали, градиент по вертикали и обычное изображение.

Начнём с фона в виде градиента по горизонтали. Первым делом, Вам необходимо вырезать изображение шириной в 1 пиксель и высотой с самого начала до того места, где уже нет изменения цвета. В итоге, получится, длинная вертикальная полоска толщиной в 1 пиксель. Пусть её высота будет 800 пикселей. Чтобы сделать такой градиентный фон, необходимо в CSS написать следующее:

body {
  background: url("images/bg.jpg") repeat-x #dedede;
}

Таким образом, эта полоска размножится по всей ширине экрана и получится градиентный фон.

Возможно, Вы сейчас спросите: «А что будет, если высота будет больше 800 пикселей?«. Вот для этого мы и задали «#dedede» — тот цвет, где уже нет указанного фонового изображения. Безусловно, у Вас будет другое значение, которое соответствует самому последнему цвету в градиенте. Таким образом, получится, что вначале идёт градиент, а уже потом однотонный цвет, и никаких рывков не происходит.

Абсолютно аналогичный принцип и с градиентом по вертикали, только нужно уже вырезать картинку высотой в 1 пиксель, а также необходимо центрировать сам фон по центру:

body {
  background: url("images/bg.jpg") repeat-y center #dedede;
}

Иногда, центрирование не требуется.

И, наконец, как сделать фон в виде обычной картинки. Здесь надо понимать один очень важный момент. Картинка не меняет свои размеры в CSS. Поэтому не получится сделать резиновую вёрстку там, где находится картинка в фоне, другими словами, картинка не будет растягиваться. А задаётся она аналогично:

body {
  background: url("images/bg.jpg") no-repeat #dedede;
}

Цвет вне изображения надо задавать таким, чтобы был плавный переход от границ картинки к этому цвету.

Я показал Вам, как сделать фон картинкой

. Безусловно, есть различные особенные случаи, где нужно уже думать самостоятельно, а самые основные и популярные варианты, Вы теперь уже знаете.

Полный курс по HTML, CSS и по вёрстке сайтов: http://srs.myrusakov.ru/makeup

  • Создано 16.12.2011 13:32:22
  • Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,

то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Стиль HTML DOM backgroundImage Свойство

❮ Назад ❮ Справочник по объектам стиля Далее ❯

Пример

Установить фоновое изображение для документа:

document.body.style.backgroundImage = «url(‘img_tree.png’)»;

Попробуйте сами »

Другие примеры «Попробуйте сами» ниже.

Определение и использование

Свойство backgroundImage устанавливает или возвращает фоновое изображение элемента.

Совет: В дополнение к фоновому изображению вы также должны указать фоновый цвет. Фоновый цвет будет использоваться, если изображение недоступно.

См. также:

Стили HTML: Свойство фона

Учебное пособие по CSS: Фоны CSS

Учебное пособие по CSS3: Фоны CSS3

Справочник по CSS: Свойство background-image

Синтаксис

2 2

объект . style.backgroundImage

Установите свойство backgroundImage:

объект .style.backgroundImage = «url(‘ URL ‘)|none|initial|inherit»

Значения свойств

Значение Описание
URL( ‘URL’ ) Расположение файла образа
нет Нет фонового изображения. Это по умолчанию
начальный Устанавливает для этого свойства значение по умолчанию. Читать про начальный
унаследовать Наследует это свойство от родительского элемента. Читать о наследовать

Технические детали

Значение по умолчанию: нет
Возвращаемое значение: Строка, представляющая фоновое изображение
Версия CSS CSS1

Поддержка браузера

backgroundImage — это функция CSS1 (1996).

Полностью поддерживается во всех браузерах:

Хром Край
Фаерфокс		 Сафари Опера ИЭ
Да Да Да Да Да Да

Дополнительные примеры

Пример

Установка фонового изображения для определенного элемента

:

document.getElementById(«myDiv»).style.backgroundImage = «url(‘img_tree.png’)»;

Попробуйте сами »

Пример

Вернуть фоновое изображение определенного элемента

:

let img = document.getElementById(«myDiv»).style.backgroundImage;

Попробуйте сами »

Пример

Вернуть фоновое изображение документа:

let img = document. body.style.backgroundImage;

Попробуйте сами »

❮ Предыдущий ❮ Справочник по объектам стиля Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
HTML Tutorial
CSS Tutorial
JavaScript Tutorial
How To Tutorial
SQL Tutorial
Python Tutorial
W3.CSS Tutorial
Bootstrap Tutorial
PHP Tutorial
Java Tutorial
C++ Tutorial
jQuery Tutorial

Top References
Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Лучшие примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.
CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

ФОРУМ | О

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

Copyright 1999-2023 Refsnes Data. Все права защищены.

W3Schools работает на основе W3.CSS.

Растянуть фоновое изображение с помощью слоев CSS

Прежде чем использовать этот код, обязательно ознакомьтесь с лучшим способом растягивания фонового изображения. Это был бы лучший способ в большинстве (если не во всех) случаях.

Однако, если у вас есть причины не использовать этот метод, ознакомьтесь с приведенным ниже методом.

До того, как было изобретено свойство CSS background-size (или, по крайней мере, реализовано во всех основных браузерах), следующий метод был лучшим способом достижения эффекта «растянутого фонового изображения».

Хитрость заключается в использовании тега HTML

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

Код

Нет времени на объяснения? Без проблем! Вот код:

<голова>Растянутое фоновое изображение <тип стиля="текст/CSS"> /* Удалите поля из тегов ‘html’ и ‘body’ и убедитесь, что страница занимает всю высоту экрана */ html, тело {высота: 100%; маржа: 0; заполнение: 0;} /* Установите положение и размеры фонового изображения.

*/ #page-background {позиция: фиксированная; верх:0; слева:0; ширина:100%; высота:100%;} /* Укажите положение и слой содержимого, которое должно отображаться перед фоновым изображением. Должно иметь более высокое значение z-index, чем фоновое изображение. Также добавьте отступы, чтобы компенсировать удаление полей из тегов ‘html’ и ‘body’. */ # содержание {позиция: относительная; z-индекс: 1; отступ: 10 пикселей;}
<тело>
Улыбка
<дел>

Растяните это фоновое изображение!

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

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

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

Обратите внимание, что этот код указывает всю HTML-страницу, поэтому для использования этого кода:

  1. Скопируйте и вставьте код в обычный пустой текстовый файл
  2. Сохраните файл с расширением «.html» (например, «index.html»)
  3. Измените код изображения, чтобы он указывал на ваше собственное изображение.

При просмотре файла в браузере фоновое изображение растягивается до размера окна браузера.

Объяснение

Начнем с обычных тегов для открытия HTML-документа:

w3.org/TR/html4/loose.dtd»> <голова>Растянутое фоновое изображение

Затем мы открываем тег

Итак, мы сделали все CSS, что нам нужно, правильно? ...НЕПРАВИЛЬНЫЙ!

Следующий код является специальным кодом, который мы используем только для Internet Explorer 6. Это связано с тем, что IE 6 не распознает наш предыдущий CSS.

Мы делаем это с помощью "условного комментария". Условный комментарий — это то, что распознают только браузеры Microsoft. Они позволяют нам указать отдельную таблицу стилей для каждой (или любой) версии IE.

А поскольку условные комментарии начинаются и заканчиваются как HTML-комментарии, другие браузеры просто игнорируют все, что между ними.

Итак, вот код для IE 6:

Затем мы закрываем и откройте тег :

<тело>

Здесь мы указываем наш образ. Обратите внимание, что мы помещаем код изображения в тег

с идентификатором «page-background». Вы помните, что мы указали стили для «фона страницы» раньше — в нашей таблице стилей.

No related posts.