Изменить фоновое изображение в теле

Как изменить фоновое изображение в CSS во время выполнения? У меня есть следующее фоновое изображение в теле и может ли изображение быть изменено во время выполнения?

body {
height: 100%;
background: #fff8db url(../images/backgrounds/header-top.jpg) no-repeat center top; 
/*background-color: #fff8db;*/
/*background-size: 1650px 900px;*/
font-family: Arial, Verdana, Helvetica, sans-serif; 
font-size:12px; 
font-weight:normal; 
color:#404040;
line-height:20px; }

Ответы

Ответ 1

Если у вас уже загружен JQuery, вы можете просто сделать это:

$('body').css('background-image', 'url(../images/backgrounds/header-top.jpg)');

ИЗМЕНИТЬ

Сначала загрузите JQuery в тег заголовка:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

Затем вызовите Javascript, чтобы изменить фоновое изображение, когда что-то происходит на странице, например, когда он заканчивает загрузку:

<script type="text/javascript">
    $(document).ready(function() {
        $('body').css('background-image', 'url(../images/backgrounds/header-top.jpg)');
    });
</script>

Ответ 2

Для этого вам нужно будет использовать Javascript. Вы можете установить стиль background-image для тела таким образом.

var body = document.getElementsByTagName('body')[0];
body.style.backgroundImage = 'url(http://localhost/background.png)';

Просто убедитесь, что вы заменили URL с фактическим URL.

Ответ 3

Просто установите функцию onload на тело:

<body onload="init()">

Затем сделайте что-то подобное в javascript:

function init() {
  var someimage = 'changableBackgroudImage';
  document.body.style.background = 'url(img/'+someimage+'.png) no-repeat center center'
}

Вы можете изменить переменную "someimage" на все, что хотите, в зависимости от некоторых условий, таких как время суток или что-то еще, и это изображение будет установлено как фоновое изображение.

Ответ 4

Если на странице есть Open Graph изображение, обычно используемое для совместного использования в сообществе, вы можете использовать его для установки фонового изображения на runtime с ванильным JavaScript следующим образом:

<script>
  const meta = document.querySelector('[property="og:image"]');
  const body = document.querySelector("body");
  body.style.background = `url(${meta.content})`;
</script>

В приведенном выше примере используется document.querySelector и Селекторы атрибутов назначить meta первое открытое изображение Open Graph, которое он выбирает. Аналогичная задача выполняется для получения body. Наконец, строковая интерполяция используется для назначения body background.style значения пути к открытому графическому изображению.

Если вы хотите, чтобы изображение охватывало весь видовой экран и оставалось неподвижным, установите background-size следующим образом:

body.style.background = `url(${meta.content}) center center no-repeat fixed`;
body.style.backgroundSize = 'cover';

Используя этот подход, вы можете установить некачественный заполнитель фонового изображения с помощью CSS и обмениваться фотографией с высоким качеством, используя изображение onload, тем самым уменьшая воспринимаемую задержку.