背景画像のランダム表示

以下の記述で背景画像をランダム表示しようとしています。

html
1<div class="image"></div>

css
1.image{
2  width: 100%;
3  height: 60%;
4  background-repeat: no-repeat;
5  background-size: contain;
6  background-position: center;
7}

js
1$(function(){
2  var bgImages = ['image1', 'image2', 'image3'];
3  var randImages = bgImages[Math.floor(Math.random() * bgImages.length)];
4  $('.image').css('background-image', 'url(' + randImages + ')');
5});

結果（1回目）：

<div class="image" style="background-image: url("image2");"></div>

結果（2回目）：

<div class="image" style="background-image: url("image1");"></div>

と、なるのですが、背景画像が表示されません。

js記述を削除して、代わりにcssに　background-image: url(image1);　と書けば image1 がちゃんと表示されます。

原因は何なのでしょうか？？
思い当たる原因をいくつか挙げていただけると助かります。

行動規範の内容に同意します

回答2件

ベストアンサー

HTMLの全文がないので推測ですが、

<div class="image"></div>　の親要素のheightの値が明示されてい（height: auto;）のでは？そのため、<div class="image"></div>の高さが０になっているかと。下記のように、heightを％指定からPX指定に変更すると表示されると思います。 ```CSS .image{ width: 100%; height: 200px; /* %指定からPX指定に変更 */ background-repeat: no-repeat; background-size: contain; background-position: center; } ```

投稿2018/10/19 13:53

miyakichi

総合スコア297

Gr.

2018/10/19 14:13

miyakichiさん回答ありがとうございます。親要素にheightは明示してあります。確認のためアドバイス通りに.imageのheightを%指定からPX指定に変更してみましたが、変わりませんでした。

miyakichi

2018/10/19 14:23

コメントを見て、こちらで上記HTML,CSS,JavaScriptをコピーして試しましたが、表示されました。以下が、ソース抜粋です <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <style> .image{ width: 100%; height: 200px; background-repeat: no-repeat; background-size: contain; background-position: center; } </style> </head> <body> <div class="image"></div> <script> $(function(){ var bgImages = ['./img/hoge.jpg', './img/fuga.jpg', './img/piyo.jpg']; var randImages = bgImages[Math.floor(Math.random() * bgImages.length)]; $('.image').css('background-image', 'url(' + randImages + ')'); }); </script> </body>

Gr.

2018/10/19 14:35

動作確認をしていただき、ありがとうございました！記述は間違っていないようなので、他に何かscriptを邪魔してないかとか色々調べてやってみます。助かりました！

行動規範の内容に同意します