• ベストアンサー
  • すぐに回答を!

ランダム表示に加えwidthをブラウザに合わしたい

  • 質問No.8003883
  • 閲覧数156
  • ありがとう数1
  • 気になる数0
  • 回答数3
  • コメント数0

お礼率 55% (31/56)

ホームページを作成しています。
5枚の画像からランダムで背景に表示する処理に加えて、選ばれた画像のwidthをブラウザに合わせて拡大・縮小したいです。
以下ソースのランダム表示の処理に加えて、ブラウザに合わせて画像を拡大・縮小して表示する方法を教えて下さい。
よろしくお願いします。

<SCRIPT language="JavaScript">
bgc = new Array();
bgc[0] = "url(../image/ti1.jpg)";
bgc[1] = "url(../image/bg2.jpg)";
bgc[2] = "url(../image/bg3.jpg)";
bgc[3] = "url(../image/bg4.jpg)";
bgc[4] = "url(../image/bg5.jpg)";
n = Math.floor(Math.random()*bgc.length);
document.body.style.backgroundImage = bgc[n];
</SCRIPT>

質問者が選んだベストアンサー

  • 回答No.3
  • ベストアンサー

ベストアンサー率 73% (39/53)

既に回答を頂いているのですが
bodyのリサイズいれないと画面のサイズ変更した時に・・・
↓みたいな感じかな
<head>
<script type="text/javascript">
function onReady(){
resizeBody();
//別にこれはcssで書いてもいい
document.body.style.backgroundSize = "cover";

//BG-IMGを指定するコードを此処に書く
}
function resizeBody(){
document.body.style.width = window.innerWidth - 50 + "px";
document.body.style.height = window.innerHeight - 50 + "px";
}
</script>
</head>
<body onload="onReady()" onresize="resizeBody()">
</body>

その他の回答 (全2件)

  • 回答No.2

ベストアンサー率 61% (1594/2576)

ANo1です。

>html(css)側でどのように、document.body.style.backgroundImage
>を操作するのでしょうか
別に操作する必要はないと思いますので、最初からCSSで指定しておけばよろしいかと思います。
例えば
  body { background-size: cover; }
  • 回答No.1

ベストアンサー率 61% (1594/2576)

CSS3なら、background-sizeで指定すればよさそう。
 http://www.w3.org/TR/css3-background/#the-background-size
補足コメント
yuki_tigers

お礼率 55% (31/56)

ありがとうございます。
javascriptで設定している背景をどのようにしてhtml(css)側に渡して、background-sizeで指定するのでしょうか?
javascript内の
document.body.style.backgroundImage = bgc[n];
で表示処理は全て完了してしまっています。
html(css)側でどのように、document.body.style.backgroundImage
を操作するのでしょうか?そこが知りたいです。
他の方でも分かる方がいらっしゃいましたら、よろしくお願いします。
投稿日時:2013/03/21 15:38
結果を報告する
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,600万件のQ&Aを分析して最適な回答をご提案します。

関連するQ&A

ピックアップ

ページ先頭へ