CSSで背景画像をランダムに表示する方法
- CSSを使用して特定の要素の背景画像をランダムに表示させる方法について説明します。
- 具体的な対応方法として、JavaScriptで要素にランダムなクラスを割り当て、そのクラスに対応する背景画像を設定する方法があります。
- また、スタイルシート内でランダムな数値を生成し、それに基づいて背景画像を設定する方法もあります。
- ベストアンサー
CSSで背景画像をランダムに表示させたいのですが
CSSで背景画像をランダムに表示させたいのですが、簡単な対応方法などありますでしょうか？ 背景のランダム表示としてbody部分をjavascriptで背景のランダム処理はたくさんあるのですが、今回はスタイルシートでbodyではなく、サイト内のいち部分のクラス要素の背景をランダムに表示させたいと思っています。 <div class="main"> ここにコンテンツがあって、このmainのクラス要素の背景をランダムに変えたいです。 </div> スタイルシートの方では現在は .main { float:left; background-image:url(/image/top_bg01.jpg); background-repeat:no-repeat; min-width:736px; height:auto; border-right:1px solid #000000; } としており、このtop_bg01.jpgの部分の画像を top_bg01.jpg top_bg02.jpg top_bg03.jpg top_bg04.jpg top_bg05.jpg とランダムに表示させたいのですが、対応方法が分からずに困っています。 http://www.designwalker.com/2006/12/random-css.html はためしてみましたが、PHPがうまく対応できずに断念してしまいました。 どなた様か宜しくお願いいたします。
- speedofhiro
- お礼率43% (14/32)
- HTML
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
変更する対象が異なるだけで、要領は同じです。 参考まで。 <html> <style type="text/css"> .main { background-image:url(/image/top_bg01.jpg); } </style> <script type="text/javascript"> window.onload = function(){ //var url = "a.jpg,b.jpg,c.jpg".split(','); var url=[]; url[0] = 'top_bg01.jpg'; url[1] = 'top_bg02.jpg'; url[2] = 'top_bg03.jpg'; var n = Math.floor(Math.random() * url.length); var elm = document.getElementById('main'); elm.style.backgroundImage = 'url(/image/' + url[n] + ')'; } </script> <body> <div class="main" id="main"> コンテンツ </div> </body> </html>
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
HTMLもCSSも触らず、また、訪問者側の環境に依存するjavascriptも使わずにできます。PHPでも可能ですが、乱数発生とかややこしいので、CGIを別途おきましょう。 月ごとに変えるものは作ったことがあるのですが、ちょっと応用が利くものを思案中。
補足
なるほど！CGIは全く頭にありませんでした。 どんな感じのCGIが簡単に使えるでしょうか？
CSSでは無理です。 Javascriptで実行します。 検索すれば出ますよ。 Javascript ランダム表示
関連するQ&A
- ＣＳＳで背景をランダム表示させたい
ＣＳＳ初心者です。 ３分割のフレームのサイトで、mainページの背景をCSSで指定しているのですが それをランダムに５種類の画像を表示出来るようにしたいのですが 何度やってもやり方が分からず教えてもらえませんでしょうか・・・ PHPは対応していないサーバーなので無理でした。 http://okwave.jp/qa/q4805263.htmlこちらも試してみましたが出来ませんでした・・・ どうかご教授願います。 ｓｔｙｌｅ.CSSから抜粋↓ /* デザイン全般設定 */ .ta1{border-bottom:1px solid #cccccc;background-color:#eeeeee;} .ta2{background:url(bg02.gif) repeat-y 260px 0px;} .ta3{background:url(bg01.jpg) repeat-y 95% 0%;} #enter_page{overflow:hidden;} #main_page{background:url(img/hptop1109.jpg) no-repeat 100% 50% fixed;}←ここでmainページの背景を指定しています。 #menu_page{border-bottom:1px solid #cccccc;background-color:#eeeeee;} #left_page{background:url(bg02.gif) repeat-y 260px 0px fixed;} .back{font-size:17px;text-align:right;background:url(back.gif) no-repeat 160px 90%;margin:20px 0px 0px 0px;padding:15px 20px 5px 0px;} .back a:hover{text-decoration:underline;} #main_page{background:url(img/hptop1109.jpg) no-repeat 100% 50% fixed;} </style> <script type="text/javascript"> window.onload = function(){ //var url = "a.jpg,b.jpg,c.jpg".split(','); var url=[]; url[0] = 'top_bg01.jpg'; url[1] = 'top_bg02.jpg'; url[2] = 'top_bg03.jpg'; var n = Math.floor(Math.random() * url.length); var elm = document.getElementById('main'); elm.style.backgroundImage = 'url(/image/' + url[n] + ')'; } </script> ↑このように、#main_page{background～～の後ろに、参考サイトのをコピペしても何も表示されず背景は白のままになってしまいました。 色々頑張ってみたのですが分からないので、どなたか教えてくれませんか・・・ 他に必要なソースがあれば追記いたします。 どうぞよろしくお願いいたします。
- ベストアンサー
- JavaScript
- firefoxでcssを使った時背景画像が表示されない
CSSでfloatを設定し、その中のそれぞれに背景画像を表示しようとすると、上手くいきません。 背景画像も背景色も表示されません。 構文に間違いがあるのでしょうか？ それともそのような仕様なのでしょうか？ よろしくお願いいたします。 ###CSS### #container { width: 900px; background-image: url(images/back.jpg); background-repeat: no-repeat; } #header { width: 900px; } #contents { width: 748px; background-color: #FFFFFF; background-image: url(images/image.jpg); background-repeat: no-repeat; background-position: top; padding: 0px; margin-left: 76px; } #footer { clear: both; width: 748px; margin-left: 76px; } #sidebar { float: left; background-image: url(images/side.jpg); width: 180px; margin-top: 14px; background-color: #FFFFFF; } #main { float: right; width: 568px; padding: 0px; background-color: #FFFFFF; background-image: url(../images/image2.jpg);
- 締切済み
- HTML
- cssで背景画像をランダム表示する
現在cssで背景画像をランダム表示するよう指示をしたいです。 テンプレート配布サイトからDLしたcssには以下のように指定されています。 ---- .menu{ float :left; background-image:url(img/menu_01.png); background-repeat:no-repeat; width :270px ---- このようなcss表記から画像をランダム表示に指定するには どのように加筆、修正をしたらよいのか教えて頂けますでしょうか。 似たような質問もたくさんされていたのでとても申し訳ないのですが、自力で色々試してみたものの、 どうしてもわからなかったので、お力を貸して頂ければ幸いです。 よろしくお願い致します。
- 締切済み
- CSS
- CSSでDIVで挟んでいるのに背景色が出ない？
CSSと（X)HTMLでページを作っています。角丸なページにしたいため、 /* ---------- 角丸画像の上辺 ---------- */ #main_contents_header { width: 800px; height:20px; background:url(./top.png) no-repeat top; margin: 10px auto 0px; padding: 0; text-align: center; } /* ---------- 上辺と下辺の間のメイン部分 ---------- */ #main_contents { background:url(./bg.png); width: 800px; margin: 0 auto; padding: 0; text-align: center; } /* ---------- 角丸画像の下辺 ---------- */ #main_contents_bottom { width: 800px; height:20px; background:url(./bottom.png) no-repeat top; margin: 0 auto; padding: 0; text-align: center; } というCSSを作り、 HTMLは <div id="main_contents_top"></div> <div id="main_contents"> ここにいろいろなコンテンツを置いていく </div> <div id="main_contents_bottom"></div> という書き方にしているのですが、<div id="main_contents">の背景画像が正しく出ず、地の色が見えてしまうのです。試しに<div id="main_contents">へpadding-bottom:300pxというような指定を加えると、正しく背景画像が出ました。 <div id="main_contents"> ここにいろいろなコンテンツを置いていく </div> という書き方ではダメなのでしょうか・・・？ 確認はFirefoxとSafariでやっています。
- ベストアンサー
- HTML
- html/css について質問です。
現在、htmlとcssを勉強しながら、トップページのコーディングしています。 以下の処理を行っています。 〇一番上に[幅136px高さ34px]のヘッダ画像を横方向にリピートして、background-attachmentはscrollで固定。上や左や右は余白なしにしたい。 〇一番下に[幅168px高さ42px]のフッダ画像を横方向にリピートして、background-attachmentはfixedでブラウザの下部分に常についてくるようにしたい。 〇javaScriptでランダムにトップの画像を表示している。 しかし、３点問題があります。 ●一番上の画像について、background-position: left bottom;にしても、ブラウザ等で確認してみると、 上や左に5px程度の余白(後ろの背景画像が隙間から見えている)ができてしまいます。 marginやpaddingを追加して0にしても、余白は埋まりません。余白を埋めてブラウザの上や左を埋めるにはどうすればよいでしょうか？ ●フッダの画像が、下にいけば消えてしまいます。CSSでheight: 42px;という設定をしているのですが、 この範囲がブラウザを大きくすると消えて見えなくなります。 だからといって、heightを設定しないと全くフッダ画像が表示されなくなります。消えずに常に表示されるようにするにはどうすればよいでしょうか？ ●またjavascriptで背景画像を表示させているにも関わらず、フッダ画像やヘッダ画像を背景画像のような記述でコーディングしてしまっています。これは普通の画像を右方向へリピートさせる方法がわからなかったため、background-repeat: repeat-x;というコードを書いてしまっています。このようなコーディングはやはり適当ではないでしょうか？ どなたかご指導お願いします。 [html] <body> <SCRIPT language="JavaScript"> bgc = new Array(); bgc[0] = "url(../image/bg1.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> <div id="container"> <div id="top_header"></div> <div id="top_footer"></div> </div> </body> [css] #container{ width:100%; height:100%; } #top_header{ background-image: url(../image/top_header.gif); height: 34px; background-position: left top; background-repeat: repeat-x; background-attachment: scroll; z-index: 1; } #top_footer{ background-image: url(../image/top_footer.gif); height: 42px; bottom: 0; background-position: left bottom; background-repeat: repeat-x; background-attachment:fixed; z-index: 2; }
- ベストアンサー
- CSS
- 背景画像を二つ指定
こんにちは。 全体の背景画像(斜めストライプの柄)と、 コンテンツ部分に背景画像(白で両サイドに線)を別々に指定したいのですが、 IEではうまく表示されましたがNetScape、Firefoxでは真ん中の画像が表示されません。。 URLはこちら http://ic.web6.jp/portfolio/rigtig.html 全体の背景はbodyに、 コンテンツにはdiv要素にrepeat-yで背景をそれぞれ指定しました。 どうすればIE以外でもうまく表示されるでしょうか？ 背景を指定しているCSSはこちら body { width : 762px; margin : 0 auto; background-image : url("images/top_bg.gif"); line-height:1.4; font-size:10pt; } div#wrap{ width : 762px; background-image : url("images/body_bg2.gif"); background-repeat: repeat-y; }
- ベストアンサー
- HTML
- 背景画像だけをはみ出して表示させたい。
CSSについて質問です。 よろしくお願いします。 CSSで背景画像だけをはみ出して表示させたいのですが、 やり方がわかりません。 例えば、exampleというIDをつけている要素があって、 中のテキストははみ出さずに背景画像だけをはみ出して表示させたいです。 ===CSS=== #example{ background-image:url(images/backimage.gif); background-repeat:no-repeat; } ===HTML=== <div id="example">背景だけはみ出したい！！</div> overflowを使うと中のテキストがはみ出してしまいますが、 何かいい方法はありませんでしょうか。 具体的には横幅180pxのサイドバーに182pxの背景画像を付けて 枠を作ろうとしています。 ご教示の程よろしくお願い申し上げます。
- ベストアンサー
- HTML
- 背景画像のランダム表示
お世話になります。 PHP勉強中です。 1.背景画像のランダム表示：bodyタグ内でなくdiv内の背景画像を変更したい。bottom right指定等施したいのでスタイルシートで書き出す？？ 2.確率を設定したい：1枚の基本画像が60％表示され、それ以外の複数の画像が40％で選択、その中で画像をランダムに設定したい。 3.使用する画像は同一フォルダ内にある、背景画像以外はいれない。今後枚数を増やしていく予定なので、ファイル名を1つずつ指定するのではなく、フォルダ内の画像を読んで、配列に・・・ と、やりたいことはあるのですが、どうやったらいいのやら・・・頭が混乱してます（汗） 私のサイトに訪問される方でjsをOFFにされている方が多少いらっしゃるので、どうせならPHPで！と意気込んでみたのですが・・・ もしよろしかったらご教授下さいませ。 よろしくお願い致します。 参考：現在設置のjsファイル <script> wall = new Array(); wall[0] = "./image/bg01.jpg"; wall[1] = "./image/bg02.jpg"; wall[2] = "./image/bg03.jpg"; wall[3] = "./image/bg04.jpg"; wall[4] = "./image/bg05.jpg"; wall[5] = "./image/bg06.jpg"; wall[6] = "./image/bg07.jpg"; wall[7] = "./image/bg08.jpg"; rnd = Math.round(Math.random() * (wall.length - 1)); document.write('<style type="text/css">div.mainTOP { background:url(' , wall[rnd] , ') no-repeat bottom right #FAFAFA; }</style>'); </script>
- ベストアンサー
- PHP
- サイドバーの背景画像(CSS)
以下のＣＳＳのソースなのですがサイドバーに http://www.01kaisha.com/img/main/main01_r2_c3.jpg を背景として使いたいのですがメインのほうに背景がいってしまい サイドバーで表示する事が出来ません。 どのようにすればサイドバーにhttp://www.01kaisha.com/img/main/main01_r2_c3.jpg を使用することが出来るのでしょうか？ どなたか分かる方いらっしゃいましたら教えてください、お願いします<(_ _)> body{ margin: 0px; padding: 0px; background-image: url(http://www.01kaisha.com/img/main/main01_r2_c3.jpg); background-repeat: repeat-y; } .main{ width: 642px; position: absolute; left: 0px; } .side{ margin-left: 642px; }
- ベストアンサー
- HTML
- IE9のみ、背景が縦に２回表示される
質問よろしくお願い致します。 タイトル通り、IE9でのみ、背景画像が縦に２回連続して表示されてしまいます。 Macの全てのブラウザ、Win Chrome、Safari、Firefox、IE6～8では問題なくきちんと表示されます。 IE9だけなんです。。。 CSSは一部分、直接HTMLに記載していますが、外部CSS（commonで使用している方など）に書いても同じでした。 ソースは下記になります。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <div class="w1000 box_shadow" style="height:645px;background:url(images/bg1.jpg) left top no-repeat;"> <div class="w960"> <h3><img src="images/ttl1.png" width="800" height="500" alt="title1" class="p-top25" /><h3> <p class="m-top30"> キャプションキャプションキャプション<br /> キャプションキャプションキャプションキャプションキャプションキャプションキャプション <p> </div> </div> <div class="w1000 box_shadow" style="height:300px;background:url(images/bg2.jpg) left top no-repeat;"> <div class="w960"> <h3><img src="images/ttl2.png" width="800" height="300" alt="title1" class="p-top25" /><h3> <p class="m-top30"> キャプションキャプションキャプション<br /> キャプションキャプションキャプションキャプションキャプションキャプションキャプション <p> </div> </div> ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 2つ縦にブロックをおいていますが、１つだけだときちんと表示されます。 背景画像と内包内容違いで複数おくと、この現象がおきます。 position:relativeやzoom:1も試してみましたがダメでした。 具体的な表示内容は、下記のようになります。（わかりずらいの画像も添付します） ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 高さ645pxでbg1.jpg背景が表示：内容カラ ーーーーーーーーーーーーーーーーー 高さ645pxでbg1.jpg背景が再度表示：タイトル画像やキャプションが入る ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 高さ300pxでbg2.jpg背景が表示：内容カラ ーーーーーーーーーーーーーーーーー 高さ300pxでbg2.jpg背景が再度表示：タイトル画像やキャプションが入る ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 原因や改善策などありますでしょうか？ どうぞ宜しくお願い致します。
- 締切済み
- CSS
お礼
やってみたのですが、うまく出来ませんでした・・・。 参考を作って頂いたのに、申し訳ないです。 ありがとうございます。
補足
動きました。 id="main"を忘れてました。 ありがとうございます！！ 嬉しいです！