- ベストアンサー
フォルダ 画像のパス
www ｜-- index ｜-- フォルダ ｜-- a001.jpg この場合、両方表示されますけど、どちらでも良いですか？ 正しい方があれば教えてください。 <div style="background-image: url(フォルダ名/a001.jpg);"> <div style="background-image: url(./フォルダ名/a001.jpg);">
- takumana20
- お礼率91% (434/473)
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
どっちでもイイです。好きな方でOK。 細かい事を言えばCSSでの記述で良いとされてるのは、 background-image: url('./フォルダ名/a001.jpg'); ～の様に「url()」の括弧の中身は「'' (または"")」で括ることかな？ でも人によって意見もまちまち、まあ無くても大丈夫。 後から他人が見て分かり易いのは「./～」が有る方かな？
関連するQ&A
- JQueryでのリンク・・
turn.jsというページをめくるアニメーションをするJQueryをつかっているのですが ＨＴＭＬの中で、 <div id="＊＊"> <div style="background-image:url(**);"></div> <div style="background-image:url(**);"></div> <div style="background-image:url(**);"></div> <div style="background-image:url(**);"></div> </div> のように画像一枚ずつ指定していくのですが、このdiv要素の画像の中にリンクを埋め込むこと は可能でしょうか？ <div style="background-image:url(**)"><img src="**.jpg"usemap="#map" /><map name="map"><area shape="rect" coords="452,248,737,290" href="http://**" /></map></div> 上記のやりかただと適用されないので困っています。
- 締切済み
- HTML
- 画像が表示されません
cssを使って、ホームページを作成しようとしています。 ファイルの構成は \MyHP のフォルダーの下に\image と \style と index.html としており、\image の中に 画像の hana.gif を入れ、\style の中に style.css の名前でｃｓｓ ファイルを書いています。 hana.gif を画面の左端に並べようとして、ｃｓｓには body {background-image:url(image/hana.gif); background-repeat:repeat-y; background-attachment:fixed} と書いています。 勿論 index.html の <header> には <link rel="stylesheet" href="style/style.css" type="text/css"> は書いています。 しかし、何も表示されません。 background-color:#ffff00; と書き換えると、画面は黄色一色に変わります。 他のことでも試していますが、どうも background-image:url(....) となるとうまくゆかないようです。 background:url(......)としてもダメです。 何が悪いのでしょうか。現在はIE7を使用していますが、IE6でもダメです。 画像ソフトで hana.gif を確認しましたが、問題なく画像が表示されます。
- ベストアンサー
- ホームページ作成ソフト
- cssで画像のパスを指定する場合
cssで画像のパスを指定する場合は、background-imageでいいのでしょうか？ 今は img.sample { background-image: url("http://test.jpg") のようにやっていますが 昔やった方法は background-image ではなく srcを使っていた気がします。 background-imageでも問題なく表示されますが、 <img class="sample"> のように、imgタグを使っているのだから、srcのほうがいいのかな、と思ってしまいます。 実際はどちらがいいのでしょうか？
- 締切済み
- CSS
- jqueryでHTMLを変える
jquery初心者です。 色々検索してみましたが、見つからないのでここで質問させてください。 jqueryでHTMLソースの変更方法を教えてください。 <a id="link"> <div id="back-img" style="background-image:a.jpg; background-position:0px 100px;" ></div> </a> -------------CSS------------- a{position:absolute;} イメージの上にposition指定のリンクが重なり、 aをマウスhoverで <div style="background-image:a.jpg; background-position:0px 100px;" > ↓ <div style="background-image:a.jpg; background-position:100px 0px;" > に変更したいです。 どうぞよろしくお願いします。
- ベストアンサー
- JavaScript
- 背景画像を2枚使いうまく繰り返す方法
htmlとcssでホームページを作っています。 背景画像を2枚使用しているんですが、どうしてもうまく表示されません。 1枚目はページ上部に。 2枚目はその下からすべて。 で、それぞれ横にリピート。 2枚目だけ縦にリピートして表示させようとしてます。 最初はbodyとdivで -------------------css-------------------------- body { background-image:url(""); background-repeat:repeat; } div.body { background-image:url(""); } ----------------html-------- <body> <div class="body"> 内容 </div> </body> --------------------------------------------- としています。 ですが、これだとdivのボックスができてしまい、横に無限に繰り返されないことになります。画面を縮小した時に切れてしまいます。 なので、htmlとbodyにそれぞれ背景をつけたんですが、 今度は両方の画像が表示されませんでした。 html { background-image:url(""); background-repeat:repeat-x; } body { background-image:url(""); } htmlのほうを消すと、bodyで指定した画像が縦横無限に繰り返されます。 htmlを消さずにbodyを無限に表示されるにはどうしたらいいですか？
- ベストアンサー
- HTML
- divの間にすき間ができる
入れ子にされたdivとdivの間で隙間ができて困っております。 構造は<div id="header2">内に企業ロゴイメージ部を<h1>タグで設置し、 入れ子で<div class="headnavi">を入れ、隙間なく<div id="navi"> を表示させるつもりですが、<div id="header2">と<div id="navi">の間に ブラウザで見たときに隙間ができてしまいます。 どうすれば隙間無く表示させることができるでしょうか？ <div style="clear:both"></div>を入れてみては？と言われましたので 入れてみましたが効果はなく困っております。 【html部】 <div id="header2"> <h1><a href="index.html"><img src="images/logo.jpg" alt="" width="270" height="80" border="0" /></a></h1> <div class="headnavi"> <ul> <li id="access"><a href="access/index.html">地図・連絡先</a></li> <li id="inquiry"><a href="inquiry/index.html">お問い合わせ</a></li><li id="sitemap"><a href="#">サイトマップ</a></li> </ul> </div> <div style="clear:both"></div> </div> <div id="navi"> <ul> <li id="aboutus"><a href="about_us/index.html">会社案内</a></li> <li id="works"><a href="works/index.html">業務紹介</a></li> <li id="enviro"><a href="enviroment/index.html">環境方針</a></li> <li id="carrier"><a href="carriers/index.html">採用情報</a></li> </ul> </div> 【スタイルシート】 #header2 { height: 80px; margin-bottom: 0px; padding-bottom: 0px; } #header2 h1 { padding-top: 0px; margin: 0px; float: left; padding-bottom: 0px; padding-left: 14px; } #header2 .headnavi { height: 24px; margin-right: 14px; } #header2 .headnavi ul { padding-top: 0px; padding-bottom: 0px; margin-top: 0px; margin-bottom: 0px; float: right; height: 24px; } #header2 .headnavi li { text-indent: -9999px; display: inline; list-style-type: none; } #header2 .headnavi li a { text-decoration: none; display: block; height: 24px; overflow:hidden; float: left; } /*------off----- */ #header2 .headnavi li#access a { width:124px; height: 24px; background-image: url(../images/head_navi.jpg); background-repeat: no-repeat; } #header2 .headnavi li#inquiry a { width:125px; height: 24px; background-image: url(../images/head_navi.jpg); background-repeat: no-repeat; background-position: -124px 0px; } #header2 .headnavi li#sitemap a { width:121px; height: 24px; background-image: url(../images/head_navi.jpg); background-repeat: no-repeat; background-position: -249px 0px; } /*------hover------- */ #header2 .headnavi li#access a:hover { background-image: url(../images/head_navi.jpg); background-repeat: no-repeat; background-position: 0px -24px; } #header2 .headnavi li#inquiry a:hover { background-image: url(../images/head_navi.jpg); background-repeat: no-repeat; background-position: -124px -24px; } #header2 .headnavi li#sitemap a:hover { background-image: url(../images/head_navi.jpg); background-repeat: no-repeat; background-position: -249px -24px; } <div style="clear:both"></div>
- 締切済み
- レンタルサーバ・ASP
- 背景画像上に複数枚の画像配置について
お世話になります。 まだまだcss勉強中なので教えて頂きたいことがございます。 １枚の背景画像に対し、別箇所にマウスオーバー時のみ表示されるように複数枚画像を配置し、そのマウスオーバー用の複数枚の画像にリンクタグをつけて、別ページへのリンクを貼りたいのです。 しかし、ネットで調べた方法ですと、うまくマウスオーバーが反映されず 余計な画像も出てきてしまいます。 おそらく間違った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
- 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の上には文字を重ねたいと考えているのですが、そのようにタグを編集してもうまく表示できません。 ご回答よろしくお願いいたします。
- ベストアンサー
- ホームページ作成ソフト
- background-imageが効かない
HTML5で組んだページでCSSを使っています。 bodyタグに設定したbackground-imageは背景に画像が表示されるのですが、body内に置いたid名をつけたdivタグに設定したbackground-imageが効きません。どのようにすれば効くのでしょうか。 【効く】 body { background-image: url("./images/haikei.jpg"); } 【効かない】 #contents { background-image: url("./images/haikei.jpg"); } そもそも、HTML5でdivタグを使うこと自体が誤りなのでしょうか。
- 締切済み
- CSS
お礼
安心しました。 ありがとうございました。