Добавить стиль в <head></head>
|
1 2 3 4 5 6 |
<style> #change { background-image: url(http://r8086929.bget.ru/wp-content/uploads/2017/03/wok-pic-empty.png); background-size: 100% auto; } </style> |
Добавить скрипт в <head></head>
|
1 2 3 4 5 6 7 |
<script> function change_color(obj) { obj.value && (document.getElementById("change").style.backgroundColor = obj.value); obj.src && (document.getElementById("change").style.backgroundImage = 'url('+obj.src+')'); } </script> |
К объекту фон которого будем заменять привязать id
|
1 2 |
<div id="change" >В этом элементу будет менять фон можно привязать к body или header или footer главное чтобы был id </div> |
Функцию вызова скрипта привязать к элементу у которого будем брать фон:
|
1 |
<img src="/image.jpg" onclick="change_color(this)" /> |
или любой другой элемент у которого задано значение value, пример:
|
1 2 3 |
<div value="/image.jpg" onclick="change_color(this)"> какой то текст или еще что то </div> |
Данному блоку нужно изначально задать ширину и высоту , для фона в пределах которых будет меняться он.
Данный скрипт будет менять забирая значение из элементов где есть функция change_color(this)