• 締切済み

CSS画像について

教えて下さい。アメブロのカスタム雛形を加工してるのですが、 どうしても上手くいかない部分があります。 お分かりの方がいらっしゃいましたら教えて下さい。 .headerBnrArea { border-bottom:1px #d5d5d5 solid; padding-bottom:8px !important; } #logo { margin:0 auto; text-indent:-9999px; width:980px; height:112px; background:url(A ttp://www.・・・・・・.jpg); } .skinFrame2 { background:url(B ttp://www.・・・・・.jpg) repeat-x left top; } このAに当たる画像はjpeg画像の980pix×112piXです。(既存で始めからありました) これと同じ画像を作成して、サーバにアップしました。 プロパティーで情報を見た後、同じ大きさで作成して、サーバーにアップしました。 「A」の部分を書き換えるとかなり縮小され、いっぱい出てきます。 何故でしょう? ちなみにブラウザ上では、「A」の画像も私がアップした画像も、右クリックで 「画像に名前をつけて保存」ではなく「背景に名前を つけて・・・」になってます。 教えて下さい。宜しくお願いいたします。

みんなの回答

  • Doubt
  • ベストアンサー率70% (7/10)
回答No.2

>今度は、1つだけになりましたが、表示されてるのは、220×25になってます。 考えられる原因として・・・ ・今現在編集しているCSSの中にもう一つの「#logo」が存在していて「width:220px; height:25px」が指定されている ・カスタム雛形のCSSじゃない方(html?PHP?)の中、「A」呼び出しの部分に「id="logo"」以外の別idやclassがついていて、それが「width:220px; height:25px」を指定されていれば、その設定にサイズが上書きされます。 後者なら、そのidやclassを削るだけで、解決できると思います。 >アメブロのカスタム雛形を加工してるのですが、 差し支えなければ、カスタム雛形はどこのドレを使っているかを教えて頂ければ、もっと詳しい事を推測できるかとおもいます。

  • Doubt
  • ベストアンサー率70% (7/10)
回答No.1

>「A」の部分を書き換えるとかなり縮小され、いっぱい出てきます。 サーバーにアップした画像を直接ブラウザー表示した場合、980pix×112pixで表示されていますか? 元画像が小さかったり、width(横)とheight(縦)の値を間違えると小さくなり、指定幅まで繰り返し表示されます。 下記の様に#logo 「A」の後ろに『no-repeat』で繰り返し表示しない。『left top』で画像を左上位置から表示』の指定が出来ます。 background:url(A ttp://www.・・・・・・.jpg) no-repeat left top; ↑の no-repeat left top; を追加して確認して見て下さい。繰り返し表示はされない…ハズ。 >「背景に名前を つけて・・・」になってます。 CSSから呼び出ししていますので、IEの仕様です。 HTML等で、直接呼び出した場合は、「画像に名前をつけて保存」になる…ハズ。

mili-117
質問者

お礼

ご回答ありがとうございます。 ご指導通り行いました。UPしてある画像は、確かに980×112でした。 今度は、1つだけになりましたが、表示されてるのは、220×25になってます。

関連するQ&A

  • CSSのリスト 背景画像が表示されません

    横並びのメニューを作成したいと思っています。 text-indent:-999pxを利用して、背景画像のみを表示させようとしているのですが、h1はうまくいくもののリスト(li)についてはまったく表示されません。 ちなみにtext-indentを使用しなければ背景画像は表示されますが、かなり画像が下にずれ込んでしまっています。 よろしくお願いします。 #header h1 { margin: 5px 0 0 20px; padding: 0; width: 248px; height: 143px; float: left; text-indent: -9999px; font-size: 130px; background: url(../images/logo.jpg) no-repeat #FFFFFF; background-position: center; } ul { margin: 0; padding: 0; width: 635px; height: 54px; } li{ float: left; list-style: none; margin: 0; padding: 5px; font-size: 50px; text-indent:-999px; } li#top { background: url(../images/menu/top.jpg) no-repeat; }

    • ベストアンサー
    • HTML
  • 1枚画像で作るCSSのナビゲーション・ロールオーバーが上手く動作しません。

    はじめまして。初歩的な質問で非常に申し訳ないのですが 今日1日自力で頑張ってみたのですがどうしても解決できないので、ご教授いただけないかと思い書き込ませていただきました・・・・。 ナビゲーションメニューを作っているのですが、 1枚画像でロールオーバーという方法でやっています。 [やりたいこと] 「横978px 縦40pxの画像を使って 6つのメニューに分けて、ロールオーバーをしているようにみせる」 [うまくいかない事] ・横並びにしたいのに、なぜか画像が縦に6つ並んでしまっている状態。 ・最初の「home」以外が全くロールオーバーしてくれない・・・ どこかおかしなところがあれば教えてください・・ よろしくお願いいたします。 【HTML】 <div id="navigation"> <ul> <li id="bttop"><a href="#" title="Home">Home</a></li> <li id="btdai"><a href="#" title="menu1">menu1</a></li> <li id="btsyo"><a href="#" title="menu2">menu2</a></li> <li id="btweb"><a href="#" title="menu3">menu3</a></li> <li id="btmap"><a href="#" title="menu4">menu4</a></li> <li id="bttel"><a href="#" title="menu5">menu5</a></li> </ul> </div> 【CSS】 #navigation { position: absolute; width: 978px; } #navigation ul { width: 978px; height:40px; margin: 0; padding: 0; list-style: none; } #navigation li { margin: 0; padding: 0; width: 978px; height: 40px; text-indent: -9999px; } #navigation li a { width: 163px; height: 40px; text-decoration: none; display: block; float:left; } #navigation li#bttop { background: url(img/navi_bar.jpg) no-repeat 0px 0px; } #navigation li#btdai { background: url(img/navi_bar.jpg) no-repeat 163px 0px; } #navigation li#btsyo { background: url(img/navi_bar.jpg) no-repeat 326px 0px; } #navigation li#btweb { background: url(img/navi_bar.jpg) no-repeat 489px 0px; } #navigation li#btmap { background: url(img/navi_bar.jpg) no-repeat 652px 0px; } #navigation li#bttel { background: url(img/navi_bar.jpg) no-repeat 815px 0px; } /* マウスオーバー時の指定 ---------------------------------------------------- */ #navigation li#bttop a:hover { background: url(img/navi_bar.jpg) no-repeat 0px -40px; } #navigation li#btdai a:hover { background: url(img/navi_bar.jpg) no-repeat 163px -40px; } #navigation li#btsyo a:hover { background: url(img/navi_bar.jpg) no-repeat 326px -40px; } #navigation li#btweb a:hover { background: url(img/navi_bar.jpg) no-repeat 489px -40px; } #navigation li#btmap a:hover { background: url(img/navi_bar.jpg) no-repeat 652px -40px; } #navigation li#bttel a:hover { background: url(img/navi_bar.jpg) no-repeat 815px -40px; }

  • CSSでのロールオーバーについて

    アメーバにてブログを作ろうと思い、実験用に作ってみました。 まずは自分の作って失敗したものを見てもらいたいのです。 ttp://ameblo.jp/bakasuke-11/ ですが、ここではページ中段にある次の記事へという部分をロールオーバー用の画像にしたのですがうまくロールオーバーできません。 よくブログなどでは使われていてたぶん出来ると思うのですが たとえばこのようにしたいのです。 ↓ ttp://ameblo.jp/sunsuntaiyo/ 自分のサイトではロールオーバーの部分は .topPaging{ margin: 0px auto 10px auto;/*注1*/ width:360px;/*全体の幅注2*/ position:relative; text-align:center; } .topPaging a.firstPage{/*最初のページへ*/ background:url(http://stat.ameba.jp/user_images/a0/a8/10081778130.gif) top center no-repeat; display:block; width:18px;/*画像の横*/ height:18px;/*画像の縦*/ text-indent:-9000px; position:absolute; top:0px; left:0px;/*左からの位置注2*/ } .topPaging a.firstPage dt a:hover{ background-position:0 -18px; } .topPaging a.previousPage{/*前のページへ*/ background:url(http://stat.ameba.jp/user_images/05/f6/10081778131.gif) top center no-repeat; display:block; width:98px;/*画像の横*/ height:18px;/*画像の縦*/ text-indent:-9000px; position:absolute; top:0px; left:45px;/*左からの位置注2*/ } .topPaging a.firstPage dt a:hover{ background-position:0 -18px; } .topPaging a.nextPage{/*次のページへ*/ background:url(http://stat.ameba.jp/user_images/8e/fd/10081778132.gif) top center no-repeat; display:block; width:98px;/*画像の横*/ height:18px;/*画像の縦*/ text-indent:-9000px; position:absolute; top:0px; right:45px;/*右からの位置注2*/ } .topPaging a.firstPage dt a:hover{ background-position:0 -18px; } .topPaging a.lastPage{/*最後のページへ*/ background:url(http://stat.ameba.jp/user_images/1e/78/10081778133.gif) top center no-repeat; display:block; width:98px;/*画像の横*/ height:18px;/*画像の縦*/ text-indent:-9000px; position:absolute; top:0px; right:0px;/*右からの位置注2*/ } .topPaging a.firstPage dt a:hover{ background-position:0 -18px; } としました。 どこが間違っていてどうすれば正常に動作するのが教えてもらいたいです。 長々と見にくいですが回答お願いします。

  • firefoxではcssで画像をプリロードができません

    リンクの貼られた画像に触れると画像が変化させようと 以下のコードを使ってみました。 IE、Operaではできたのですがfirefoxではもともと表示されてるはずの画像も触れたときに表示される画像も表示されません。 何かやり方があるのでしょうか? ■html <p class="xxx"><a href="#">sample</a></p> ■css p.xxx{ background:url("img01/a_img.gif") no-repeat; } p.xxx a{ display:block; width:200px; height:50px; background:url("img01/b_img.gif"); text-indent:-9999px; } p.xxx a:hover{ background:none; }

    • ベストアンサー
    • CSS
  • css画像置換を使ったロールオーバーボタンが表示されない

    ナビゲーションリストを作成しています。 アンカーリンクしたテキストをindentで飛ばして 背景画像を表示させ、マウスオーバーは a:hoverで背景画像を高さぶんずらして対応するタイプ、 いわゆる画像置換式のロールオーバーボタンを作りました。 制作環境はMac OSX DreamWeaverCS3です。 まず気になるのが、DreamWeaverの作成画面で このボタン部分が空白で表示される事です。 これはそんなものなのでしょうか。 Firefox,safari,Operaでうまく表示されていたので、 気にしないで制作を進めてきたのですが、 ネット上のレンダリングサービスでは、windowsXP IE7で DreamWeaverの作成プレビューと同じように空白表示となり、 もしや何か間違っているのではと思いはじめました。 ネット上のレンダリングサービスは不完全という話もあり、 友人のwindowsXP IE7では見えているそうなので 問題があるのかもわかりません。 よろしくお願いします。 a.bt1 { display:block; width:150px; height:50px; text-indent:-9999px; background:url(images/bt1.jpg) no-repeat; margin:10px 0px 0px 0px; float:left; overflow:hidden; } a:hover.bt1 { background-position:0px -50px; }

    • ベストアンサー
    • HTML
  • CSSで背景画像を一番下にもってきたいのですが・・・

    依頼されたページを作成中ですが、 bodyに指定したbackground画像を一番下にもってくるにはどうしたら良いか分からず、困っております。 #loginの背景に指定した「top_haikei.jpg」は、 position: fixed ; bottom:0; と指定することで一番下にもってくることに成功しましたが、 bodyの背景に指定している「haikei_bottom.gif」を一番下に持ってくる方法が分かりません。 CSS初心者の為、詳細にご教示頂ける方のご回答をお待ちしております! よろしくお願い致しますm(u_u)m ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ■CSS *{ margin:0px; padding:0px; } html { scrollbar-face-color: #F5E1D8; scrollbar-highlight-color: #FFFFFF; scrollbar-shadow-color:#F5E1D8; scrollbar-3dlight-color: #F5E1D8; scrollbar-arrow-color: #FFFFFF; scrollbar-track-color: #FFFFFF; scrollbar-darkshadow-color: #FFFFFF; } body { margin:0 auto 0; background-color: #FFFFFF; font-family:sans-serif; font-size:8pt; background-image: url(../img/haikei_bottom.gif); background-repeat: repeat-x; background-position: center bottom; } form { margin:0px; scrollbar-face-color: #F5E1D8; scrollbar-highlight-color: #FFFFFF; scrollbar-shadow-color:#F5E1D8; scrollbar-3dlight-color: #F5E1D8; scrollbar-arrow-color: #FFFFFF; scrollbar-track-color: #FFFFFF; scrollbar-darkshadow-color: #FFFFFF; } input { font-size:12px; } #container { width:950px; margin:0 auto 0; background-color:#FFFFFF; } #logo{ margin-left:80px; height:180px; } #box1{ text-align:center; line-height:20px; height:150px; } #login{ height:250px; background-image: url(../img/top_haikei.jpg); background-repeat: no-repeat; background-position: center bottom; position: fixed ; bottom:0; } #login_left{ float:left; margin-top:120px; margin-right:50px; line-height:20px; width:700px; } #login_right{ float:left; margin-top:100px; width:200px; }

  • 背景画像上に複数枚の画像配置について

    お世話になります。 まだまだcss勉強中なので教えて頂きたいことがございます。 1枚の背景画像に対し、別箇所にマウスオーバー時のみ表示されるように複数枚画像を配置し、そのマウスオーバー用の複数枚の画像にリンクタグをつけて、別ページへのリンクを貼りたいのです。 しかし、ネットで調べた方法ですと、うまくマウスオーバーが反映されず 余計な画像も出てきてしまいます。 おそらく間違ったcssを記述していると思うので ご指摘いただけると助かります。 -------------------------------------------------------------- 【html】 <div class="demo"> <div class="demo1"><a href="#"></a></div> <div class="demo2"><a href="#"></a></div> <div class="demo3"><a href="#"></a></div> <div class="demo4"><a href="#"></a></div> <div class="demo5"><a href="#"></a></div> </div> 【css】 .demo { background: url("../img/imgbg.jpg") no-repeat; display: block; width: 800px; height: 1108px; } .demo1 a { width: 800px; height: 1108px; background: url("../img/imgbg.jpg") no-repeat; display: block; position:absolute; } .demo1 a:hover { background-image: url("../img/img1.png"); position:relative; top:475px; left:635px; display:block; } .demo2 a { width: 800px; height: 1108px; background: url("../img/imgbg.jpg") no-repeat; display: block; position:absolute; /*text-indent: -9999px;*/ } .demo2 a:hover { background-image: url("../img/img2.png"); position:relative; top:469px; left:480px; display:block; } .demo3 a { width: 800px; height: 1108px; background: url("../img/imgbg.jpg") no-repeat; display: block; position:absolute; } .demo3 a:hover { background-image: url("../img/img3.png"); position:relative; top:477px; left:322px; display:block; } .demo4 a { width: 800px; height: 1108px; background: url("../img/imgbg.jpg") no-repeat; display: block; position:absolute; /*text-indent: -9999px;*/ } .demo4 a:hover { background-image: url("../img/im4.png"); position:relative; top:477px; left:167px; display:block; } .demo5 a { width: 800px; height: 1108px; background: url("../img/imgbg.jpg") no-repeat; display: block; position:absolute; /*text-indent: -9999px;*/ } .demo5 a:hover { background-image: url("../img/img5.png"); position:relative; top:477px; left:10px; display:block; } -------------------------------------------------------------- a のクラスの時に背景画像を指定しなくても良いんじゃないかと思い 消してみたら画像が表示されなくなってしまったので そのまま記載しています。 上記の記述のままですと、マウスオーバーが正しく反応しないですし マウスオーバー時に別箇所に背景画像が表示されてしまいます。 やりたいことは画像にしましたのでご確認ください 黒○は背景画像内にある形で、その上に同じ形の赤○を マウスオーバー時の画像として表示したいです。 (図が下手ですみません) わかる方、ご教示をお願いします。

    • 締切済み
    • CSS
  • css 画像の一部分をリンクにしたいです

    画像の一部分だけをリンクにしたいです。 margin と width と height で指定したエリアをマウスオーバーすると、指定した部分だけ画像が変わってリンクになるという動作をさせたいのですが、うまくいきません。 最悪、画像が変わらなくても指定した部分のリンクができれば良いのですが画像全体がリンクになっているため、全体画像の上でマウスを動かしていると、リンク時のマウスカーソルになったり通常時のマウスカーソルになったりを繰り返しています。 html と css は以下のような記述をしています。 <html> <head> <style type="text/css"> div#menu a:hover { display:block; background-image:url(img/headerimg02.jpg); background-repeat:no-repeat; margin: 50px 468px 250px 50px; width:200px; height:100px; text-align:center; text-indent: -2000px; overflow: hidden; } </style> </head> <body> <div id="menu"> <a href="hoge.html"><img src="img/headerimg01.jpg" width="718" height="400"></a> </div> </body> </html>

    • ベストアンサー
    • CSS
  • cssで、一枚の画像でロールオーバーができない。

    一枚の画像でロールオーバーさせたいのですが、 どうしてもうまくいきません; 全体 幅495px,高さ60px の画像。 幅99x30pxのボタンで、縦2,横5つ並んでいます。 縦1行目に、通常ボタンが横5つ。 縦2行目に、オンマウスボタンが横5つ。 nav1~nav5のボタンに、 通常は、1行目、1つ目のボタンが表示されていて、 オンマウスすると、画像が消えてしまいます。 わかる方、回答お願いします。 ■html <div id="globalnav"> <ul> <li id="nav1"><a href="#">a</a></li> <li id="nav2"><a href="#">b</a></li> <li id="nav3"><a href="#">c</a></li> <li id="nav4"><a href="#">d</a></li> <li id="nav5"><a href="#">e</a></li> </ul> </div> ■css #globalnav{ width:495px; height:30px; margin-left:305px; margin-top:70px; padding:0; } #globalnav ul{ list-style: none; margin:0; padding:0; } #globalnav li{ float:left; width:99px; margin:0; padding:0; text-indent:-9999px; } #globalnav li a{ display:block; text-decoration:none; width:99px; height:30px; background: url(rollover.gif) no-repeat; } /*通常*/ #nav1 a { background: 0 0; } #nav2 a { background: -99px 0; } #nav3 a { background: -198px 0; } #nav4 a { background: -297px 0; } #nav5 a { background: -396px 0; } /*オンマウス*/ #nav1 a:hover { background: 0 -30px; } #nav2 a:hover { background: -99px -30px; } #nav3 a:hover { background: -198px -30px; } #nav4 a:hover { background: -297px -30px; } #nav5 a:hover { background: -396px -30px; }

  • cssハックについて

    googleとfirefoxでcssが聞かない箇所があります。 css--------- #operation { width: 420px; background-image: url(../picture/top/left_middle.jpg); background-repeat: repeat-y; background-position: center top; margin-top: 10px; } #operation img { border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; } #operation #ope_top { background-image: url(../picture/top/left_top.jpg); background-repeat: no-repeat; background-position: left top; height: 30px; padding-bottom: 0px; margin-bottom: 0px; } #operation #ope_top #ope_tit { font-size: 14px; line-height: 2; font-weight: bold; color: #FFFFFF; text-indent: 10px; float: left; width: 200px; margin-top: 0px; padding-top: 0px; height: 20px; } #operation #ope_top .ope_img { padding-top: 5px; float: right; margin-right: 10px; } #operation #ope_middle { margin-top: 0px; padding-top: 0px; width: 420px; margin-left: -200px;←ここがおかしいです!! } #operation #ope_middle .content ul { margin-top: 5px; padding-left: 30px; list-style-image: url(../picture/list.jpg); } #operation #ope_middle .content li { margin-bottom: 5px; margin-top: 1px; } #operation #ope_middle .content .line01 { border: 1px dotted #CCCCCC; margin-top: 2px; margin-bottom: 2px; } というかんじなのですが、左右へとぶれてしまいます。 どのように修正したいいのか困っております。 参考になるようなことありましたらお願いします。

専門家に質問してみよう