• ベストアンサー

背景のことで

ジャバスクリプトで、背景をランダムに表示させる というものがありますが この背景の位置を指定してランダムに表示させる方法は無いでしょうか? 例えば、背景画像を真ん中に固定してその背景画像をランダムに表示させるようにしたいのですが・・・。 (普通に画像で表示させるのではなく、背景で) どなたか位置を指定して出来る方法を知っている方が居ましたら教えて下さい。

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

  • ベストアンサー
  • zzzzzz
  • ベストアンサー率61% (70/113)
回答No.1

HTML単独では位置を指定する方法がありませんので不可能です。 が、スタイルシートを使用するなら可能です。 背景画像を変更するには document.body.style.backgroundImage="url(sample.jpg)"; のようにします。繰り返し表示をやめる場合は document.body.style.backgroundRepeat="no-repeat"; のようにします。表示位置指定は document.body.style.backgroundPosition="center center"; とします。 よって、a.jpg、b.jpg、c.jpgのどれかをランダムで中央に背景として表示するスクリプトは次のようになります。 <HTML> <HEAD> <SCRIPT> imageList = new Array(); imageList[0] = "a.jpg"; imageList[1] = "b.jpg"; imageList[2] = "c.jpg"; function imageSelect() { var index = Math.floor(Math.random() * imageList.length); document.body.style.backgroundPosition = "center center"; document.body.style.backgroundRepeat = "no-repeat"; document.body.style.backgroundAttachment = "fixed"; document.body.style.backgroundImage = "url(" + imageList[index] + ")"; } </SCRIPT> <BODY onload="imageSelect()"> </BODY> </HTML>

参考URL:
http://tohoho.wakusei.ne.jp/wwwcss2.htm#Background

関連するQ&A

  • javaスクリプトで背景画像をランダム表示。

    javaスクリプトを使って特定のボックスの背景画像をランダム表示するようにしたいのですが、その記述法を教えていただけないでしょうか。 http://blog.e-groover.org/archives/2004/06/21/185334.php こちらも参照したのですが、cssで画像位置を固定するようになってますが、全体のボックスをセンタリングしているのでちょっと違う気が。 基本的なcss、htmlの知識はあります。 どうぞよろしくお願いします。

    • ベストアンサー
    • HTML
  • 背景に二つ表示

    まずひとつ。 <BODY>タグに入る、背景画像(この画像はもう背景をとして使えるので位置は指定せず、<BODY>タグに入れました) そしてもうひとつ。 右下に画像を固定したいのです。 そうすると、 <HEAD>タグに一つ、入ります。 そして<BODY>タグにも入ります。 両方表示させると、<HEAD>タグのほうしか反映されません; まとめると、 背景画像+右下に画像を固定表示させるにはどうしたらいいでしょうか?

  • 固定の背景画像をランダム表示したい。

    現在、HPを作成中なのですがどうしてもうまくいきません!!(>_<) お力をお貸しください!! ---- 固定してある背景画像を、アクセスするたびにランダム表示をしたいのです! 固定してない背景をランダム表示する方法はわかるのですが、固定してあるとどうしてもできません…。 なにかいい方法はありませんでしょうか? ちなみに画像が固定してある場所は、画像毎にちがいます。 よろしくお願いします!!

  • テーブルごとの背景の位置固定

    テーブルごとに背景の位置を指定して固定したいのですが、方法が分かりません。 普通の<head>~<head>内に入れて、ページ全体の背景を固定するのは分かるのですが、 そのタグだと1ページごとにしか指定できませんよね。 テーブルごとに背景の位置を指定して固定出来る方法を教えて下さい。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • ブラウザの大きさによって背景画像の位置が違う

    ブラウザの大きさによって、背景画像の位置(横位置)が変わってしまうのですが、どうしたらブラウザの大きさに依存せずに背景画像を一定の位置に置くことができるのでしょうか?? 背景画像はcssのbackground-positionで横位置のみ%を使って指定しました。 left center rightなどで指定すると、ブラウザ関係なく、固定の位置で表示してくれるのですが、今回はレイアウト的に%を使って微妙な位置に表示させたいのです。 この説明では分かりづらいかもしれませんが、 %を使わなくても微妙な位置に設定でき、ブラウザの大きさに依存しない方法などありましたら、アドバイスをお願いいたします!!

  • 背景画像の位置固定

    背景画像~画像固定と位置固定  過去ログにも似たような質問で、背景画像の固定がありました。 <BODY BACKGROUND="./img/back.gif" BGPROPERTIES=FIXED> ☆これと同時にブラウザの表示画面で、右下や左上といった 背景画像の位置まで固定させる方法とはあるのでしょうか? このとき、画像は並べて表示するのではなく、一つ だけ表示したいんです。サイズは400×400pix.です。  どうぞよろしくお願いします。

    • ベストアンサー
    • HTML
  • 外部CSSで背景画像を表示させる方法

    外部CSSについての質問です。 ホームページを作成するにあたり、外部CSSを使用しているのですが、背景画像が表示されません。 普通の(固定なし)背景画像はきちんと表示されるのですが、「背景画像を固定する」タグだと表示されません。 ソースは間違っていないし、何度やっても表示されず、こちらで質問することにしました。 固定方法は、パーセントで指定する方法です。 どなたかご指導頂けないでしょうか? よろしくお願い致します。

    • ベストアンサー
    • CSS
  • 背景画像の変更と保存

    1.プルダウン(セレクト)メニューで画像名を選択すると、背景画像が変更できる 2.背景画像によって、配置位置を指定できる(右上固定/全面に繰り返し表示等) 3.ブラウザを閉じて開いても、選択した画像が背景に表示される 下記がイメージに近いのですが、2と3の機能がありません。 http://www2s.biglobe.ne.jp/~club_tom/java-kouza/sample/ha/ha-no5_2/ha-no5_2.htm 再現できるスクリプトを紹介して頂けると助かります。宜しくお願い致します。

    • ベストアンサー
    • HTML
  • 背景画像をランダムにスライドショーしたい

    背景にフルスクリーンで画像を乗せてスライドショーにしていますが、これをランダムに表示をさせたいのです。 背景画像のスライドショーまでのスクリプトは結構あるのですが、ここにランダムにするという形になると中々見つからなくてかなり困っています。 ちょっと急を要する内容なのですが、どなかたやり方を教えて下さい。 もしくはその手のサイトがあったら教えて下さい。 宜しくお願いします。m(_ _)mm(_ _)mm(_ _)m

  • Flashで背景をランダムに変えたいんですが‥‥

    外部のSWFファイルを読み込んで、それをランダムに表示させたいんですがどうも上手くいきません。 Flashがバージョン5のため、画像のみを貼りつけたSWFファイルを読み込ませて、それを背景に使おうとしています。 ホームページに載せて、見るたびに背景を変えようという狙いです。 それで、色々と調べてみてスクリプトもいじって外部ファイルを読み込んで表示はしてくれるようになったんですが、表示の一番上に来てしまってメニューのボタンなんかが隠れてしまうのです。 これが、書いてあるスクリプトです。 onClipEvent (load) { no = Math.floor(Math.random()*3)+1; loadMovieNum("haikei"+no+".swf", 0); } スクリプトにはどうも分からない点が多いので、細かく説明していただけるとありがたいです。 修正点や、「こういうやり方もある」っていうのがありましたら、ご指導の方をよろしくお願いします。