Стиль HTML DOM backgroundImage Свойство
❮ Назад ❮ Справочник по объектам стиля Далее ❯
Пример
Установить фоновое изображение для документа:
document.body.style.backgroundImage = «url(‘img_tree.png’)»;
Попробуйте сами »
Другие примеры «Попробуйте сами» ниже.
Определение и использование
Свойство backgroundImage устанавливает или возвращает фоновое изображение элемента.
Совет: В дополнение к фоновому изображению вы также должны указать фоновый цвет. Фоновый цвет будет использоваться, если изображение недоступно.
См. также:
Стили HTML: Свойство фона
Учебник CSS: Фоны CSS
Учебник CSS3: Фоны CSS3
Справочник по CSS: Свойство background-image
Синтаксис
объект .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Учебник CSS
Учебник JavaScript
Как Учебник
Учебник SQL
Учебник Python
Учебник W3.CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery
Top3 Reference
900
Справочник по 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-2022 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.
38 Фоновые эффекты JavaScript
Коллекция отобранных вручную бесплатных ванильных фоновых эффектов JavaScript примеров кода: изменение цвета фона или изображения, анимированное, с холстом и т. д. Обновление коллекции за февраль 2020 года. 24 новинки.
- Анимированные фоны CSS
- Фоновые плагины jQuery
О коде
Окружающий фон в оттенках серого
Фон частиц.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: easyljs.js, tweenmax.js
О коде
BVAmbient — Фоновые частицы VanillaJS
Простой в использовании фон частиц, созданный с помощью VanillaJS.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: bootstrap.css, bvambient.js
О коде
Изменение цвета фона с помощью GSAP ScrollTrigger
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: локомотив-scroll.css, gsap.js, локомотив-scroll.js
О коде
Шаблоны Юникода
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Холст JavaScript
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Холст JavaScript
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Отвечает: да
Зависимости: —
О коде
Эффект при наведении курсора для сетки фонового изображения
Краткое руководство о том, как добиться эффекта наведения при наведении на сетку фонового изображения.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Холст JavaScript
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Движение
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: victor.js, chroma.js, simplex-noise.js, tweakpane.js
О коде
1337 Матрица
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Сетчатые черви
Анимирует связанные узлы сетки.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Привет Матрица
Hello World на 92 языках, падающих под дождем матричного кода.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Привет Свет
DYNAMIC_DRAW
и bufferSubData
комбо
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Случайный шеврон
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Случайное, Cos и Sin
Нажмите, чтобы рандомизировать.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: three.js, chroma.js
О коде
Разноцветные круги
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Разноцветные квадраты
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Оранжевые квадраты
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Колебание
Играйте с красочной шаткой поверхностью. Интерактивная игрушка-мышь. Заставьте поверхность прыгать и качаться.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Изменение формы фона
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
О коде
Решетка Трюше
Генератор мозаичного фона, использующий плитки трюше с чередующейся окраской.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: p5.js
О коде
Поле потока N.2
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: p5.js
О коде
Обязательный падающий снег
Попробуйте поиграть с параметрами в графическом интерфейсе справа. Падающий снег — лишь один из бесчисленных возможностей.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: sparticles.js, dat.gui.js, stats.js
О коде
Метаболы — WebGL
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Заполнить фон анимацией
Итерировать каждый элемент на странице, раскрашивая их.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Тройные обои «А»
Нажмите, чтобы открыть новый шаблон.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: css-doodle.js, webfont.js
О коде
Светлячки
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Фоновая текстура в нескольких разделах
Отображение одной фоновой текстуры на нескольких разноцветных элементах div

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: nouislider.js
О коде
римд
Переместите мышь или проведите пальцем по сенсорному устройству, чтобы перемещаться по звездам.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Кристаллический параллакс
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Анимированный градиент маски CSS-изображения
Анимированный CSS маска-изображение
градиент с JavaScript.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Круг Spipa
Частицы никогда не сталкиваются друг с другом.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: lodash.js
О коде
Фон Вращающиеся квадраты
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Шаблон SVG Космос
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: tweenmax.js, drawsvgplugin.js
О коде
Пепельный водопад
Когда я смотрю в этот выжженный мир, падает пепел.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: three.js, ccapture.js
О коде
Разреженный треугольный фон
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
О коде
Изменение цвета
Щелкните в любом месте.