• 締切済み

簡単なｃｓｓについて質問です

oldkey09の回答

  • oldkey09
  • ベストアンサー率100% (1/1)
回答No.1

background: url(../image/aaa.gif) 0 0 no-repeat； これで試してみてもだめでしょうか？ ぜひ試してみてください

この回答がついた質問に戻る
  1. カテゴリ
  2. インターネット・Webサービス
  3. SNS・掲示板・ブログ
  4. ブログ

関連するQ&A

  • 本当に困っています。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
  • 文字の両側に画像を配置するCSSのやり方

    ●AAAAA●　●BBBBB●　●CCCCC● 上記のように文字の両側に●画像をCSSにて配置したいのですが。 HTML <div class=R> <a href=".html">AAAAA</a> <a href=".html">BBBBB</a> <a href=".html">CCCCC</a> </div> CSS div.R a { background-image: url("●.gif"); background-repeat: no-repeat; background-position: left center; margin-right: 12px; padding-left: 7px } この状態では、左に●は表示されるます。 もうひとつ重ねればとおもい <div class=R>の中に<div class=R2>なるものを配置し、 div.R2 a { background-image: url("●.gif"); background-repeat: no-repeat; background-position: right center; margin-left: 12px; } を重ねてみたんですが、うまくいきません。 右にも表示させてい場合は、どのような記述にすれば表示されるのでしょうか？

    • ベストアンサー
    • CSS
  • ブロック要素の右下寄せ

    添付されている画像のように、Aブロック要素内の右下にBブロック要素を配置したいです。 下記の記述だとFFではきちん表示されるのですが、IEでは表示すらされません。 どうしたらよいでしょうか？ *htmlの記述 <div id="box-a"> <div class="box-c"> <h2>見出し</h2> <p>内容</p> </div> <div class="box-c"> <h2>見出し</h2> <p>内容</p> </div> <div id="box-b"> <p>内容</p> </div> </div> *CSS #box-a{ margin:0; padding:50px 0; position:relative; background-image:url(../img/box-a.gif); background-repeat:no-repeat; background-position:left bottom; } #box-c{ margin:20px 120px 0px 200px; padding:10px; background-image:url(../img/box-c.gif); background-repeat:no-repeat; } #box-b{ position:absolute; right:0; bottom:0; margin:0; padding:0; width:150px; height:150px; background-image:url(../img/box-b.gif); background-repeat:no-repeat; }

    • ベストアンサー
    • CSS
  • cssでロールオーバー設定した画像がoperaでは最初のロールオーバーでは非表示になります

    いつもお世話になっております。 以下の様にcssを組みました。 〔ｃｓｓ〕 @charset "UTF-8"; #bnn0513 span { display:none; } #bnn0513 a { display:block; width:212px; height:102px; padding:0; background-image:url(images/sample.gif); background-repeat:no-repeat 0 0; } #bnn0513 a:link { background-image:url(images/sample.gif); background-repeat:no-repeat 0 0; } #bnn0513 a:visited { background-image:url(images/sample.gif); background-repeat:no-repeat 0 0; } #bnn0513 a:hover { background-image:url(images/sample_ov.gif); background-repeat:no-repeat 0 0; } #bnn1 a:active { background-image:url(images/sample_on.gif); background-repeat:no-repeat 0 0; } 〔xhtml（一部）〕 <div id="bnn0513"> <a href="sample.html"><span>サンプル</span></a></div> CSSでロールオーバー設定した画像が、他のブラウザではきちんと表示されるのですが、operaブラウザでは一度目にカーソルをロールオーバー指定した場所に置くと、hover用の画像が表示されず、sample.gifの画像も消えてしまいます。 一旦カーソルを移動させて再び戻すとhover用の画像は表示されます。 一度目にカーソルを置いたときもキチンと表示される様にしたいのですが、どうすればよろしいでしょうか？ java等他のプログラミングが入っても構いませんので方法をご教授ください。 宜しくお願い致します。

    • ベストアンサー
    • HTML
  • IE6でのみCSSの背景が見えない

    度々すみません。 CSSで見出しの設定をしているのですがなぜか<h2>見出し2の背景画像だけIE6で見えません。 Nescape,safari,firefoxでは問題ありません。 しかも他の見出しは同じ手順で作成、記述しているのに全て見えています。すごく不思議です。 記述は下記の通りです。 //-----css #main h2 { font-size: 9px; color: #FFFFFF; background:no-repeat; margin: 10px 0px; padding: 0px; height: 44px; width: 595px; font-size: 9px; color: #FFFFFF; height: 44px; width: 595px; margin: 8px 0px 0px; } .PROFILE { background:url(../image/ttitle_company.gif)} .COUNSUL { background:url(../image/ttitle_con.gif)} .PRODUCTS { background:url(../image/ttitle_products.gif)} .BACKGROUND { background:url(../image/ttitle_company.gif)} .CASESTUDY { background:url(../image/ttitle_case.gif)} //-----HTML <h2 class="PROFILE"><em>会社情報</em></h2> 的確なご意見以外にも何か疑われる事があれば教えて下さい。 よろしくお願い致します。

  • css

    上下２つの画像で角丸にcssでしようと思います。上はこれでいいんですが 下の表示はどうするんでしょうか。 <div id="sub"> <h1>メニュー</h1> <ul> <li><a href="1.html" >123</a></li> <li><a href="2.html" >123</a></li> <li><a href="3.html" >123</a></li> </ul> </div> #sub { float:right; margin-top:5px; width:180px; padding:5px 5px 2px 5px; background-image: url(ue.gif); background-repeat:no-repeat; } #sub h1 { background: url(images/a.gif); color:#333333; font-size:11px; font-weight: normal; padding:5px 20px ; } #sub ul{ padding:0; list-style:none; background-color:#FFFFFF; } #sub li{ margin:0 0 0 0px; border-bottom:1px solid #0000ff; } #sub li a { display:block; padding-left:20px; background:url(images/1.gif) 2% 50% no-repeat; line-height:35px; } わかりましたらよろしくお願いします。

    • ベストアンサー
    • CSS
  • ブラウザ崩れが起こりました。CSSを書き直したいのですが、よく分かりません。

    ブラウザ崩れが起こりました。CSSを書き直したいのですが、よく分かりません。 http://www.asahi-home.info/test/asahi-home/index2.html でページ上部「ホーム」「会社情報」「住宅情報」などがあるメニューの部分です。 これが、ブラウザによっては青い画像の下に隠れてしまうようです。 当方PCでIE６、IE7、FireFox２．０、Safari（バージョン不明）で確認したところ問題なく表示されます。 クライアント様からこの部分の表示崩れがおきているとのクレームがありました。（クライアント様のブラウザ不明） その部分のCSSは以下のようになっています。 アドバイス宜しくお願いいたします。 /* ナビ*/ #navi { text-align: left; } #navi li { float: left; } #navi li a{ display: block; text-indent: -9999px; } #navi li#menu01 a{ background: url("../image/navi01.gif") no-repeat; width: 99px; height: 40px; } #navi li#menu02 a{ background: url("../image/navi02.gif") no-repeat; width: 99px; height: 40px; } #navi li#menu03 a{ background: url("../image/navi03.gif") no-repeat; width: 99px; height: 40px; } #navi li#menu04 a{ background: url("../image/navi04.gif") no-repeat; width: 119px; height: 40px; } #navi li#menu05 a{ background: url("../image/navi05.gif") no-repeat; width: 99px; height: 40px; } #navi li#menu06 a{ background: url("../image/navi06.gif") no-repeat; width: 103px; height: 40px; } #navi ul li.active a { background-position: 0 -40px absolute !important; } #navi ul li a:hover { background-position: 0 -40px absolute !important; text-decoration: none; } /* メインイメージ（青の画像部分）*/ #bgmainImage { clear: both; margin: 0 auto; height: 200px; background: url("../image/main_image_bg.gif") no-repeat center bottom; } .mainImage { margin: 0 auto; width: 800px; } /* メイン コンテンツ部分*/ #bgmain { margin: 0 auto; background-color: #fff; } #main { margin: 0 auto; width: 800px; padding: 8px 0 0 0; } #main h3 { clear: both; margin: 15px 0 0 0; }

  • IE8で追加したcss背景画像が表示されません

    新しく追加した背景画像がFireFoxでは表示されるのにIE8だと表示されません。 ↓はソースで、「FILE3.gif'」が表示されません。 ------------------------------------------ <css内より抜粋> -css1.css- h2 { width: OOOpx; height: OOpx; background-repeat: no-repeat; background-position: O% OO%; } ※数値の部分は伏せています。 -css2.css- h2.hoge1{ background-image: url('画像場所/FILE1.gif'); } h2.hoge2{ background-image: url('画像場所/FILE2.gif'); } h2.hoge3{ background-image: url('画像場所/FILE3.gif'); } ←新しく追加したもの <jsp内より抜粋> <%@ page contentType="text/html; charset=Shift_JIS"%> <% request.setCharacterEncoding("Shift_JIS");%> ～中略～ <h2 class="hoge3"><font class="none">ホゲ３画像</font></h2> ～以下省略～ ------------------------------------------ 以前からあった背景画像はちゃんと表示されています。 jspで<img src="画像場所/ファイル3.gif">とやれば一応IEでも画像は表示できるのですが、画像の位置がズレてしまうので、この方法はだめそうです。 文字コードはcss、jspともにShift-JISです。 追加した画像はファイル1,2と同じ場所にあります。 また、<h2 class="hoge3">を<h2 class="hoge2">に変更したら、FILE2.gifの画像がIEでも表示されました。（FILE3.gifとFILE2.gifはほぼ同じ大きさです。） どなたか解決策がわかる方、またはどこを調べればいいかわかる方いましたらお願いします。

    • 締切済み
    • 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

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する
質問する