- 締切済み
上下にイメージをリピートさせたい
よく見ますが、下記サイトの様にtopとbottom（ヘッダーとフッター）にbackground-imageを無限にループするイメージ（カラー） ってcssでどう指定したら出来るのでしょうか。 左右にスペースが出来てしまったりで上手くいきません。 http://www.deviantart.com/ http://www.good.is/ http://www.postbox-inc.com/ ----------------html--------------------- <body> <div id="container"> ・ ・ ・ </div> <div id="footer> </div> </body> ------------------css---------------------- body { background-image: url(img/bg1.gif); background-repeat: repeat-x; } div#footer { background-image: url(img/bg2.gif); background-repeat: repeat-x; } ではだめですよね・・・ なるべくシンプルなソースがいいのですが、 お助けください。
- take555555
- お礼率66% (6/9)
- CSS
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
関連するQ&A
- 背景リピート―反映されない
背景をリピートしたいのですが、反映されません。 ～HTML～ <body> <div id="container"> <div id="about"> ここに背景をリピートさせたい。 </div> </div> </body> ～CSS～ #container #about { background-image: url(img/○○.jpg); background-repeat:repeat-y; } これだけでは駄目なのでしょうか？ 全くの無知で申し訳ありません。。
- ベストアンサー
- その他([技術者向] コンピューター)
- 背景イメージの重ね表示
こんにちは。 MTを使ってテンプレートを作っているのですが、サイドバー全体の背景の上に、別な背景を表示させようとしています。 例えば以下のようなかんじです。 <style type="text/css"> .bg { background-position: left; background-repeat: repeat-y; background: url("./img/bg.gif"); } .fg { padding-bottom: 100px; background-position: bottom; background-repeat: no-repeat; background-image: url("./img/fg.gif"); } </style> ： ： <!-- ▼サイドバー▼ --> <div class="bg"> <div class="fg"> ： ： </div> </div> <!-- ▲サイドバー▲ --> IE だと全体の背景が前面にでてしまい、ホントは前面に表示されて欲しい別な背景が消されてしまい困っています。※Firefox などでは問題ない。 サイドバー全体の背景の上に別な背景を表示させたい場合には、どのようにすればいいのか教えください。 よろしくお願いします。
- ベストアンサー
- ブログ
- CSSについて教えて下さい
ホームページビルダーでの経験しかない初心者です。CSSに挑戦していますが不明な点ばかりです。 無料テンプレートを加工していますが下記の内容を教えて頂けませんか。 topとtop2の左側（上下位置は中間）に私が追加したtop3の画像を 表示させたいのですがうまくできません。宜しくお願いいたします。 CSS #bodyid{ background:#eafefe url('img/bg.png'); padding:0; margin:0; text-align:center; } #bg{ width:706px; background:#fff; margin:0 auo; } #top{ width:400px; height:80px; background:url('img/title1.gif') no-repeat center top; text-align:left; } #top2{ width:400px; height:60px; background:url('img/title2.gif') no-repeat center top; text-align:left; } #top3{ position:absolute; left 120px; top 30px; width:100px; height:80px; background:url('img/image555.gif') no-repeat center top; } html <body id="bodyid"> <DIV id="bg"> <div id="top"></div> <div id="top3"></div> <div id="top2"></div>
- ベストアンサー
- その他([技術者向] コンピューター)
- 本当に困っています。html/cssについて。
html/cssについて。画像が表示されません。 html/cssを手打ちしてコーディングしています。 一部の画像がどうしても表示されず、困っています。 まず、背景画像はJavaScriptで５枚の画像からランダムで表示。 次に帯状のヘッダ画像(top_header.gif)を最上部に横方向にリピートして表示。 同じくフッダ画像(top_footer.gif)を最下部に横方向にリピートして表示。 そして左上にホームボタン画像(TOP_s1.gif)を配置。 次が問題になっている箇所です。 ボタン画像(button_r1_c1_s1.gif[width 136px heignt 36px])を上から0px,右から500pxの位置 に、ブラウザの大きさに関わらず常に表示される(fixed)ようにしたいのですが、 画像が表示されなくなります。ちなみに透明のままですが、ブラウザで確認するとタブの遷移はできます。 これもちなみにですが、上から0px,右からも0pxの位置に指定すると表示されます。 右から0pxだと表示されるが、それ以外だと表示されません。他の画像が邪魔しているのなのか、原因がわかりません。 同様にフッダ画像(top_footer.gif[width 1681px height 42px])も表示されていません。 これはheightを1000pxくらいで指定すれば、なぜか表示されるのですが、邪道な気がしています。 どなたかボタン画像(button_r1_c1_s1.gif)とフッダ画像(top_footer.gif)の表示方法をご指導願います。 よろしくお願いします。 【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 id="TOP_s1"><a href="#"></a></div> <div id="News"><a href="#"></a></div> </div> </body> 【CSS】 @charset "utf-8"; /* CSS Document */ body{ padding-top: 0; padding-right: 0; padding-left: 0; margin-top: 0; margin-right: 0; margin-left: 0; overflow-y: hidden; overflow-x: hidden; } #container{ height:100%; width: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; <!-- 1000pxくらに表示すると表示される --> bottom: 0; background-position: left bottom; background-repeat: repeat-x; background-attachment:fixed; z-index: 2; } #TOP_s1 a { background-image: url("../image/TOP_s1.gif"); height: 194px; width:332px; background-position: left top; background-repeat:no-repeat; background-attachment: scroll; position:absolute; z-index: 3; top:0; left: 0; } #TOP_s1 a:hover { background-image: url("../image/TOP_s2.gif"); } #News a { <!-- 問題箇所１ --> background-image: url("../image/button_r1_c1_s1.gif"); height: 136px; width:36px; background-position: right top; background-repeat:no-repeat; background-attachment: fixed; position:absolute; z-index: 3; top:0px; right: 500px; <!-- 500pxを0にすればなぜか表示されます --> }
- ベストアンサー
- CSS
- 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のみでCSSのbottomが効かない。
IEのみ、CSSのbottomが効かない現象に悩まされております... こちらを改善する方法をご存知の方は、ご教授いただけますと大変に助かります。。 以下がCSSに記述しているプラグラム内容となります。 body{ position: relative; background-image: url(../image/bg/t_bluestick.jpg), url(../image/pattern/navi_pt.png), url(../image/gnavi/bg.png), url(../image/gnavi/bg_pt.png), url(../image/header/header_img3.png), url(../image/pattern/footer_white_pt.png), url(../image/footer/footer_pt.png), url(../image/pattern/dec_pt_50.png), url(../image/bg/pt_whitetile.png) ; background-repeat: repeat-x, repeat-x, no-repeat, repeat-x, no-repeat, repeat-x, repeat-x, repeat-y, repeat ; background-position: top, center 321px, center 321px, center 311px, center 23px, bottom, bottom, center 10px, center ; background-color: #BFE5FF ; } 何卒よろしくお願い申し上げます。
- ベストアンサー
- CSS
- cssで角丸で一部の画像だけを変更したい。
cssで角丸テーブルにトライしています。（参考にしたサイトhttp://jmblog.jp/archives/94） これをアレンジして、左上の画像（タイトル部分にする）のみを枠によって変えたいと思っています。<span class="taiken"></span>のクラス名を変えることで画像を変えられると良いのですが、 でもどうしても上手く行きません。どうぞどなたかお助け下さい。 ＊＊＊＊＊＊＊＊ＨＴＭＬ＊＊＊＊＊＊＊＊＊ <div class="dialog"> <div class="header"><span class="taiken"></span> <div class="c"></div> </div> <div class="body"> <div class="c">テストテスト</div> </div> <div class="footer"> <div class="c"></div> </div> </div> ＊＊＊＊＊＊＊＊ CSS ＊＊＊＊＊＊＊＊ .dialog { width:698px; } .dialog .header .c, .dialog .footer .c{ font-size:1px; /* ensure minimum height */ height:20px; } .dialog .header span.taiken{ background-color: transparent; background-image: url(../pic/head_r1_c1.gif); background-repeat: no-repeat; background-position: 0px 0px; height: 37px; } .dialog .header .c{ background-color: transparent; background-image: url(../pic/head_r1_c2.gif); background-repeat: no-repeat; background-position: right 0px; height: 37px; } .dialog .body{ background-color: transparent; background-image: url(../pic/body_r2_c1.gif); background-repeat: repeat-y; background-position: 0px 0px; } .dialog .body .c{ background-color: transparent; background-image: url(../pic/body_r2_c2.gif); background-repeat: repeat-y; background-position: right 0px; } .dialog .footer{ background-color: transparent; background-image: url(../pic/footer_r3_c1.gif); background-repeat: no-repeat; background-position: 0px 0px; } .dialog .footer .c{ background-color: transparent; background-image: url(../pic/footer_r3_c2.gif); background-repeat: no-repeat; background-position: right 0px; } 宜しくお願いいたします。
- ベストアンサー
- HTML
- 上部と下部にx-repeat∞の背景画像を置きたい
html { background-image: url(../images/design_02.jpg); background-repeat: repeat-x; background-position: top; } body { font-family: sans-serif; color: #333333; background-color: #ffffff; background-image: url(../images/design_47.jpg); background-repeat: repeat-x; background-position: bottom; } でcssを組んでいます。 画面一杯に、ヘッダーを含めた上部、フッターを含めた下部にグラデ背景を乗せたデザインにしたいのですが、上記cssでは緩衝しあうのか、bodyで置いた画像しか表示されません。 このようなデザインにしたい場合、どのようなcssにすれば良いのでしょうか。
- ベストアンサー
- CSS
- DIV内の padding について
下記のようなCSSとHTMLファイルにてデザインをしています。 main 内にてpaddingを上下左右に10px 有効にしたいのですが、下記のような記述をCSSにした場合、padding が top (bottom?)にしか適用されません。左右に適用させるにはどうすればよいのでしょうか？ よろしくお願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <head> <link rel="stylesheet" media="all" type="text/css" href="index.css" /> </head> <body> <div id=wrapper> <div id=header></div> <div id=face></div> <div id=navi></div> <div id=main></div> <div id=footer></div> </div> </body> </html> body { background: url(img/bg.gif); margin: 0 auto; text-align: center; } #wrapper { width: 800; margin: 0 auto; background: #EEE; } #header { clear: both; height: 50px; text-align: left; background: #009 url(img/header.gif) no-repeat; border-bottom: 1px solid #FFF; } #face { clear: both; height: 200px; text-align: left; background: url(img/face.jpg) no-repeat; border-bottom: 1px solid #FFF; } #navi { float: left; width: 130px; height: 550px; background: #009; text-align: center; border-right: 1px solid #FFF; } #main { font-family: Maiandra GD, Verdana, Arial; font-size: 14px; line-height: 20px; text-align: left; padding: 10px; } #footer { clear: both; height: 50px; background: #009 url(img/footer.gif) no-repeat; border-top: 1px solid #FFF; }
- ベストアンサー
- HTML
- フッタの背景画像をリピートxで左右に伸ばす方法
フッタの背景画像をリピートxで左右に伸ばす方法について質問します。 色々なサイトを見て検証してみましたが、どのように試してもサイト自体の幅以上、画像が左右に伸びません。 切れてしまいます。 cssを載せますので、どなたかアドバイスをいただけたら嬉しいです。 よろしくお願いします。 ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ #footer { background-color:#ffffff; color:#222; height:100px; text-align:center; vertical-align:bottom; padding-top:35px; margin-top:13px; background-image: url(<UserImg>/footer_bg.gif) ; background-repeat: repeat-x; background-position: top; min-width:1025px; overflow:visible; }
- ベストアンサー
- CSS
お礼
ご返答ありがとうございます。 左右のスペースが無くなりました！ きっと基本的な事なんですよね。 NO1さんにも返答したのですが、footerがボトムに表示されないです。 何かが足りないのでしょうか。。。