Случайное фоновое изображение при обновлении

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

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" />
<script type="text/javascript">
  var images = ['OUT01ari.jpg' 'OUT02adobe.jpg' 'OUT03alife.jpg' 'OUT04chinup.jpg' 'OUT05datenightwinecologne.jpg' 'OUT06officechair.jpg' 'OUT07printer.jpg' 'OUT08whitewall.jpg' 'OUT09umbrella.jpg' 'OUT10converse.jpg' 'OUT11wardrobebar.jpg'];

  $('#background').css({'background-image': 'url(images/' + images[Math.floor(Math.random() * images.length)] + ')'});

</script>

Затем я ввел div в теле страницы, но безрезультатно:

<body>

<div ="#background"></div>
<div class="container">

</div>
</body>

Куда я иду не так?

Ответ 1

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

У вас также должны быть два отдельных элемента script, один для включения jquery, а другой для вашего кода.

Содержимое тега script с атрибутом src должно игнорироваться большинством браузеров.

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

<script type="text/javascript">
 var images = ['OUT01ari.jpg', 'OUT02adobe.jpg', 'OUT03alife.jpg', 'OUT04chinup.jpg', 'OUT05datenightwinecologne.jpg', 'OUT06officechair.jpg', 'OUT07printer.jpg', 'OUT08whitewall.jpg', 'OUT09umbrella.jpg', 'OUT10converse.jpg', 'OUT11wardrobebar.jpg'];
 $('#background').css({'background-image': 'url(images/' + images[Math.floor(Math.random() * images.length)] + ')'});
</script>

W3C 4.3 Скриптинг HTML5 гласит:

Если есть атрибут src, элемент должен быть либо пустым, либо содержат только документацию script, которая также соответствует содержимому scriptограничения.

И то же самое верно для более ранних версий, которые я считаю.

Edit:

Если вы работаете с локальной файловой системой, обязательно измените URL-адрес на jQuery на http://, а не на //.

Кроме того, убедитесь, что ваш script выполняется, когда элемент #background существует, запустив документ.

Этот пример должен работать даже локально:

<html>
 <head>
  <style type="text/css">
   #background { 
    position:fixed; left: 0px; 
    top: 0px; background-size:100%;  
     width:100%; height:100%; 
     -webkit-user-select: none; -khtml-user-select: none; 
     -moz-user-select: none; -o-user-select: none; user-select: none; 
      z-index:9990; 
    }
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript" ></script>
  <script type="text/javascript">
   $(function() {
    var images = ['OUT01ari.jpg', 'OUT02adobe.jpg', 'OUT03alife.jpg', 'OUT04chinup.jpg', 'OUT05datenightwinecologne.jpg', 'OUT06officechair.jpg', 'OUT07printer.jpg', 'OUT08whitewall.jpg', 'OUT09umbrella.jpg', 'OUT10converse.jpg', 'OUT11wardrobebar.jpg'];
    $('#background').css({'background-image': 'url(images/' + images[Math.floor(Math.random() * images.length)] + ')'});
   });
  </script>
 </head>
 <body>
  <div id="background"></div>
  <div class="container">
  </div>
 </body>
</html>

Ответ 2

<div ="#background"></div>

должен быть

<div id="background"></div>

(Или это была только опечатка?)

Ответ 3

Чтобы показать фоновое изображение, div должен иметь некоторый размер/область, вы это попробовали?

<body>

<div id="background" style="width: 50px; height: 60px;"></div>
<div class="container">

</div>
</body>

?