重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら>

電子書籍の厳選無料作品が豊富!

ホームページを作成しています。
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>

A 回答 (3件)

既に回答を頂いているのですが


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>
    • good
    • 0

ANo1です。



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

CSS3なら、background-sizeで指定すればよさそう。


 http://www.w3.org/TR/css3-background/#the-backgr …

この回答への補足

ありがとうございます。
javascriptで設定している背景をどのようにしてhtml(css)側に渡して、background-sizeで指定するのでしょうか?
javascript内の
document.body.style.backgroundImage = bgc[n];
で表示処理は全て完了してしまっています。
html(css)側でどのように、document.body.style.backgroundImage
を操作するのでしょうか?そこが知りたいです。
他の方でも分かる方がいらっしゃいましたら、よろしくお願いします。

補足日時:2013/03/21 15:38
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!