Javascript Reference — HTML DOM Style backgroundImage Property
The backgroundImage property sets or gets the background image of an element.
Browser Support
 |
 |
 |
 |
 |
|
|---|---|---|---|---|---|
| backgroundImage | Yes | Yes | Yes | Yes | Yes |
Syntax
Return the backgroundImage property:
Set the backgroundImage property:
Property Values
Technical Details
| Default Value: | none |
|---|---|
| Return Value: | A string representing the background image |
| CSS Version | CSS1 |
Example
The following code shows how to set a background image for a document.
The code above is rendered as follows:
Example 2
The following code shows how to set a background image of a specific <div> element.
The code above is rendered as follows:
Example 3
The following code shows how to get the background image of a specific <div> element.
Как создать смену фонового изображения при click?
Суть вопроса — реализовать смену фонового изображения в блоке при событии click. Структура элемента — реализация tabs на HTML&CSS&jQuery.
(пример не совсем рабочий на Codepen из-за проблем подключения jeet.gs, rupture и так далее — просьба не заострять на этом внимание; на локальном компе все работает).
Первую половину js-кода (реализация tabs) я позаимствовал на этом ресурсе, ибо своих мозгов пока не хватает в js.
Вторую половину (смена фонового изображения) состряпал сам. Но меня смущает топорная манера, в которой это выполнено (почти на 100% уверен в данном факте).
Подскажите более изящный способ реализации такой задачи. Плюс — хотелось бы с эффектом анимации при смене изображения.
И еще — может быть, имеется готовый плагин под jQuery для реализации смены фонового изображения при click? Самостоятельные посики ни к чему не привели — пришлось самому ваять строки.
Как изменить фон страницы сайта
Всем привет! Сегодня я покажу примеры изменения фона веб-страницы с помощью языка JavaScript!
Итак, в данном уроке будет рассмотрено два способа изменения фона, все примеры, как и всегда, вы можете скачать к себе на компьютер, изменить их, либо использовать их на своих сайтах в том виде, в котором их создал я!
Без долгой вступительной болтологии переходим к делу!
Как изменить фон, выбрав цвет?
В этом примере будет показано, как изменить фон, выбрав нужный цвет из выпадающего списка.
Давайте рассмотрим верстку:
Как видите, у нас имеется выпадающий список с идентификатором – color. По событию onchange (при изменении выбранного элемента списка) будет срабатывать функция changeBg (о ней ниже), которая и будет изменять фон нашей страницы.
Добавлять и изменять цвета очень просто, для добавления нового цвета просто добавьте в код строчку вида:
Можно добавлять не только код цвета, но и непосредственно его название (без решетки), например, red, green, blue и так далее.
Что найти нужный цвет, просто введи в любом поисковике фразу:
Для примера, с помощью этих стилей, я выровнял список по центру, а также, для красоты, задал внутренние отступы в 10px.
Теперь давайте рассмотрим и разберем код функции, которая изменяем фон:
Первой строчкой функции мы сохраняем объект (который мы выбрали по id color) в переменную myColor.
Второй строчкой вы выбираем элемент страницы body и изменяем у него фон, присваивая ему значение выбранного элемента списка.
Как видите, ничего сложного нет.
Теперь давайте рассмотрим второй пример – с картинками.
Как изменить фон, нажав на картинку?
Здесь пример будет таковым: перед вами будет несколько картинок, и по нажатию на одну из них, изменится фон (то есть в качестве фона будет использоваться картинка).
HTML верстка изображений:
В общий блок div с идентификатором bg мы помещаем изображения, по клику на которые будет изменяться фон.
Если нужно добавить свою картинку, то просто добавьте строку вида:
указав путь (ссылку) к картинке.
По клику на каждую из картинок (то есть по событию onclick) будет срабатывать функция changeBg, в качестве параметра которой будет передаваться текущая картинка (this).
Теперь давайте рассмотрим Css код, а после разберем функцию изменения фона:
Общий блок (#bg) выравниваем по центру, а также, выравниваем по центру все элементы (в данном случае картинки).
Вторым правилом (#bg img) мы задаем всем картинкам общего блока ширину в 200px, а также изменяем курсор при наведении на картинку (pointer – курсор в виде указателя).
Как много кода – не правда ли? ��
Этой строчкой мы берем элемент body и изменяем у него фоновую картинку, в качестве url адреса (пути) картинки берем атрибут src той картинки, на которую мы нажали.
Вот так вот при просто это делается!
На этом данный урок по JavaScript завершен, надеюсь, он будет полезен для вас.
Желаю вам удачи, пока!
Если вам нужна помощь в создании какого-либо функционала, сайта, сервиса, тестов или калькуляторов, то готов помочь, подробнее на странице услуг.