- ベストアンサー
no-repeat 0 0
background: url(../img/bg-header.jpg) no-repeat 0 0; のCSSの記述についてなのですが。。。教えてください。 最後の 「0 0」の意味がわかりません。 もしかして、 background-position: right top の意味でいいでしょうか? よろしくお願いいたします。
- sakura5678
- お礼率90% (67/74)
- HTML
- 回答数3
- ありがとう数5
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
その他の回答 (2)
- abril
- ベストアンサー率69% (388/560)
> background: url(../img/bg-header.jpg) no-repeat 0 0; 一部、他の方達と回答が重複しますが。 ・background-positionの値を示す。 ・1番目の値が左の基点からの位置、2番目の値が上からの位置 ・"0 0"の場合、下記と同じ意味。 background-position: 0px 0px; background-position: 0% 0%; background-position: left top; そして、これはbackground-positionの初期値でもありますので、省略可です。つまりサンプルの場合： background: url(../img/bg-header.jpg) no-repeat; と記述してもかまわない、ということです。
お礼
left top ですね。 ありがとうございました。。。^^ また、その他、参考になりますwww ^^
- 0wl
- ベストアンサー率43% (10/23)
left top の意味です not right ! OK?
お礼
left top ですね。 ありがとうございました。。。^^
関連するQ&A
- 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
- HTMLでの背景画像設定について
はじめまして。 HP作成初心者なのですが、いろいろとネットで調べながら作成しています。 フレームを使っていて、メニュー画面側のほうに画像をふたつ使いたいと考えています。 それぞれ左上と左下とで固定する画像なのですが、それがどうしてもふたつ同時に表示できません。 <style type="text/css"> <!-- BODY {background-image : url("bg2.jpg");background-position: 100 0%; background-repeat: no-repeat;background-attachment: fixed;} --> </style> <style type="text/css"> <!--BODY {background-image : url("bg.jpg");background-position: 0 100%; background-repeat: no-repeat;background-attachment: fixed;} --> </style> という感じに記述しているのですが、こうすると、下にあるbg.jpgのみが反映されてしまって、bg2.jpgは反映されません。 また、bg2.jpgの上には文字を重ねたいと考えているのですが、そのようにタグを編集してもうまく表示できません。 ご回答よろしくお願いいたします。
- ベストアンサー
- ホームページ作成ソフト
- 上下にイメージをリピートさせたい
よく見ますが、下記サイトの様に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
- cssのfloatで右にメニューを出す方法を勉強し
cssのfloatで右にメニューを出す方法を勉強しています。 ヘッダの左にロゴ（クリックをするとTOPへ飛ぶ） 右にメニューを横並びで表示したいです。 ＿＿＿＿＿＿＿＿＿ ■ ■■■■ ロゴ メニュー ＿＿＿＿＿＿＿＿＿ のようにしたいのです。 例えばロゴもメニューもそれぞれwidth100px heith50pxのサイズとし、 メニューにもそれぞれ違う画像を入れ、マウスオーバーで違う画像に変わるようにし、marginを10pxあけるとすると ☆★☆★css☆★☆★ /* abc */ #header ul.abc{ float:right; margin: 0 ; padding: 0 ; width: 400px; } #header ul.abc li { float:left; display: inline; } /* 01 */ #header ul.abc li.01 { width:100px; height:50px; margin:0 10 0 0; } #header ul.abc li.01 a { display: block; background: url(../img/01.jpg) no-repeat top left; } #header ul.abc li.01 a:hover { display: block; background: url(../img/01_om.jpg) no-repeat top left; /* 02 */ #header ul.abc li.02 { width:100px; height:50px; margin:0 10 0 0; } #header ul.abc li.02 a { display: block; background: url(../img/02.jpg) no-repeat top left; } #header ul.abc li.02 a:hover { display: block; background: url(../img/02_om.jpg) no-repeat top left; /* 03 */ #header ul.abc li.03 { width:100px; height:50px; margin:0 10 0 0; } #header ul.abc li.03 a { display: block; background: url(../img/03.jpg) no-repeat top left; } #header ul.abc li.03 a:hover { display: block; background: url(../img/03_om.jpg) no-repeat top left; /* 04 */ #header ul.abc li.04 { width:100px; height:50px; margin:0 0 0 0; } #header ul.abc li.04 a { display: block; background: url(../img/04.jpg) no-repeat top left; } #header ul.abc li.04 a:hover { display: block; background: url(../img/04_om.jpg) no-repeat top left; ☆★☆★html☆★☆★ <div id="header"> <div class="logo"><a href="">ロゴ</a></div> <ul class="menu"> <li class="01"><a href=""01</a></li> <li class="02"><a href="">02</a></li> <li class="03"><a href="">03</a></li> <li class="04"><a href="">04</a></li> </ul> <div class="clear"></div> </div> これは例なんですが、 この記述できると思ったのですが、うまくいかず困っています。 何か足りないのでしょうか？それともcssで何か勘違いをしているのでしょうか？ お手数をおかけしますが、ご教授お願いします。
- ベストアンサー
- CSS
- 上部と下部に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
- 画面上端のmarginを消すには？
現在CSSを猛勉強中なのですが、検索してもひっかからず、悩んでいるので質問させてください。 --- css --- #maincontents{ width:100%; height:400px; background-image:url(../img/haikei.jpg); background-repeat: no-repeat; background-position: center; } --- html --- <div id="maincontents"> </div> これでブラウザで表示させると上端に隙間ができてしまっています。 margin-top: 0; を #maincontents{ に書いて試してみたのですがうまくいきません。 お分かりになりましたらご回答いただけたらと思います。
- ベストアンサー
- 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
- 本当に困っています。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
- 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>
- ベストアンサー
- その他([技術者向] コンピューター)
- CSSで背景の重なり指定
ページの背景を設定するために body { background: #000000 url(../img/back1.jpg) no-repeat right top; z-index:2; } とし部分的に表示したい背景を .side { background: #000000 url(../img/back2.jpg) repeat; z-index:1; } としています。 やりたいことはbodyで記述した背景を1番前に表示させたいと 思っているのですが.sideに記述した背景が手前に 出てきてしまいます。 これを解決する方法はないでしょうか？ブラウザはIE6.0です。
- 締切済み
- HTML
お礼
left top ですね。 ありがとうございました。。。^^