- ベストアンサー
Repeat画像の切り出し方
warpspaceの回答
考え方としては、画像を真ん中で縦に切ってから左右を入れ替え、それを繋ぎなおすと 横にリピートしたときに継ぎ目のない画像になります。 ポイントとしては、繋ぎなおしたところが不自然にならないような画像を用いることです。 下記のサイトで解りやすく解説されています。
関連するQ&A
- 上部と下部に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
- 上下にイメージをリピートさせたい
よく見ますが、下記サイトの様に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; } ではだめですよね・・・ なるべくシンプルなソースがいいのですが、 お助けください。
- 締切済み
- 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のbodyの勉強をしているのですが
http://www.mitsuike.ed.jp このサイト↑を使ってcssを勉強しているのですが、 http://www.mitsuike.ed.jp/common/css/common.css のcssのbodyで body { color: #666666; margin: 0px; padding: 0px; text-align:center; background: #F9F9F9 url(../images/bg.gif) repeat-y top center; } となっているのですが このサイトは color: #666666となっている程暗いグレーではないのでなぜなのか分かりません。 また、画像が置かれているhttp://www.mitsuike.ed.jp/common/images/bg.gif をrepeat-y top center;ということで 下方向に連続しているのでbodyの部分の背景になってるということは分かるのですが、 そこになぜ更に#F9F9F9と背景色を使用しているのかが分かりません。 これからcssを勉強して覚えていきたいと思っているのですが、こんな初歩的な事でつまって質問してしまい申し訳ありません。 よろしくお願いします。
- ベストアンサー
- CSS
- 複数指定の背景が表示されない
困っているのでどなたかお力添えをお願いします。 htmlとbodyにそれぞれ別の背景画像を指定しているのですが、 IE6でのみ片方の背景が表示されません。 html { background: url(../images/bg.jpg) repeat center bottom; } body { background: url(../images/header-bg.jpg) repeat-x center top; } どうすれば表示されるようになるでしょうか？ divを使う背景画像の複数指定が上手くいかなかったのでこのやり方をしています。
- ベストアンサー
- 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
- 背景画像を二つ指定
こんにちは。 全体の背景画像(斜めストライプの柄)と、 コンテンツ部分に背景画像(白で両サイドに線)を別々に指定したいのですが、 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
- パララックスが出来ない。
javascript初心者です。 http://www.webopixel.net/javascript/350.html を参考にして、以下のようにhtmlファイルを 作りましたが、bg1の画像が繰り返され貼りついているだけです。何が悪いんでしょうか？ <head> <style type="text/css"> <!-- #bg01 { background: url(images/bg1.png); height: 3000px; } #bg02 { background: url(images/bg2.png); } #bg03 { background: url(images/bg3.png); } --> </style> <script type="text/javascript" > $(function() { $(window).scroll(function(){ var y = $(this).scrollTop(); $('#bg01').css('background-position', '0 ' + parseInt( -y / 5 ) + 'px'); $('#bg02').css('background-position', '0 ' + parseInt( -y / 50 ) + 'px'); $('#bg03').css('background-position', '0 ' + parseInt( -y / 200 ) + 'px'); }); }); </script> </head> <body> <div id="bg03"> <div id="bg02"> <div id="bg01"> <!-- /#bg01 --></div> <!-- /#bg02 --></div> <!-- /#bg03 --></div> </body> </html>
- ベストアンサー
- JavaScript
- Chrome だと、画像が少し下にずれてしまう
こんにちは！ CSS初心者で、今回初めてＣＳＳを利用してホームページを作っています。 制作中に、行き詰ってしまい質問をさせていただきました。 メインナビの背景に画像、その上にリストのテキスト、そしてカーソルオーバーをすると、違う画像が表示するようにしています（ナビは、リストをfloatで横並びに表示しています）。 ＩＥだと、問題なく正しい位置で表示されるのですが、Ｆｉｒｅｆｏｘや Ｃhromeだと、カーソルオーバー用の画像が下に少しずれて表示されてしまいます。 元凶を、探してみたんですが、なかなか見つけられません。 わかる方がいらっしゃったら、教えていただけないでしょうか。 お粗末なＣＳＳコードですが（多分、無駄なコードがいっぱいありそう・・・） のせさせていたたきました。 よろしくお願いします。 CSS -------------------------------------------------------------- @import url(base.css); body{ text-align:center; margin-right : auto;margin-left : auto; background-image : url(images/bg_brown.png); background-repeat: repeat; font-size : 90%; padding-top : 0px; padding-bottom : 0px; margin-top : 0px; margin-bottom : 0px; height : 100%; } #wrap{ text-align : center; margin-top : 0px; margin-left : auto; margin-right : auto; margin-bottom : auto; width : 100%; padding-top : 0px; } #com_back{ background-image : url(images/bg_green.png); background-repeat : repeat-x; } #g_navi_back{ width : 100%; height : 80px; text-align : center; background-repeat : repeat; background-image : url(images/bg_g_navi.png); } #g_navi{ overflow : hidden; width : 900px; margin 0 auto; margin-left : auto; margin-right : auto; background-repeat : no-repeat; background-image : url(images/navi_base.png); height : 80px; } #g_navi ul{ padding-top : 0px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; } #g_navi li{ text-align : center; width : 180px; float : left; border-collapse : collapse; background-position : left center; top : 50%; bottom : 50%; letter-spacing : 1px; line-height : 18px; } #g_navi li a{ display : block; padding-top : 20px; } #g_navi ul li a:link{ text-decoration : none; color : black; } #g_navi ul li a:hover{ background-image : url(images/navi_hover_g.png); background-repeat : no-repeat; background-position : center center; height : 80px; } .inner{ text-align : left; margin-top : 0px; margin-left : auto; margin-right : auto; width : 900px; background-repeat : repeat; height : auto; background-image : url(images/bg_white.png); } html ------------------------------------------------------------------------------ <!--外枠--> <div id="wrap"> <!--ロゴ--> <div id="com_back"><div id="com" ></div></div> <!--ナビ--> <div id="g_navi_back"> <div id="g_navi"> <UL style="list-style-type : none"> <LI><a href="index.html">ホーム</a></li> <LI><a href="**********">ご案内</a></li> <LI><a href="**********">ご利用方法</a></li> <LI><a href="**********">イベント詳細</a></li> <LI><a href="**********">アクセス</a></li> </UL></div> </div><!--ナビ_end--> <div class="clear"><hr /></div><!--ナビfloatクリア--> <div class="inner"><!--インナー-->
- ベストアンサー
- CSS
- ディスプレイのサイズに合わせた背景画像
html、cssは独学、javaはネットに上がっているものを活用させていただく程度の質問者です。 メインコンテンツ<wrapper>と<body>にかけて右角にラインの画像を斜めに貼り付けたサイトを作成しようと思っています。 今のところ下記のように書いているのですが、これだとlineのwidth=300pxのせいで、ブラウザに横スクロールが出来てしまいます。この横スクロールが出ないように設定したいのです。 例えば、ディスプレイのサイズを取得してlineのwidthをちょうせいする。とかlineを斜めにリピートするとか。 なにかよい方法がありましたら、お教え下さい。よろしくお願い致します。 *****html部分************************************ <body> <div id="wrapper"> <div id="header"> <div class="line"></div> </div> </body> ************************************************ *****css部分************************************ body{ width:auto; margin:0; padding:0; background:url(../images/body_bg.jpg) repeat; } div#wrapper{ width:850px; margin:0 auto; padding:0; background:url(../images/wrapper_bg.gif) repeat-y; } div#header{ width:850px; height:210px; margin:0 auto; background:url(../images/header_bg.gif) no-repeat; position:relative; } div#header div.line{ width:300px; height:200px; background:url(../images/line.jpg) repeat-x; position:absolute; left:850px; top:0; } ************************************************
- 締切済み
- CSS