背景画像にロゴを重ねる方法を教えてください。

前へ 次へ
このQ&Aのポイント
  • CSSを使用して、背景画像にロゴを重ねる方法を教えてください。ヘッダー背景のgraduation.pngの上に、ロゴ画像であるtitle.gifを重ねたいですが、うまくいきません。
  • HTMLの<div>タグの中にある<a>タグの中で、ロゴ画像を設定しています。CSSの.dz_headbarの背景にgraduation.pngを設定し、その上にロゴ画像を重ねたいです。
  • ロゴ画像を重ねるためには、CSSのbackground-imageプロパティとbackground-positionプロパティを使用します。graduation.pngを背景に設定して、ロゴ画像であるtitle.gifをbackground-positionで重ねる位置を指定します。ただし、現在うまくいっていないため、アドバイスをいただきたいです。
回答を見る
  • ベストアンサー

背景画像にロゴを重ねる方法を教えてください。

ＣＳＳで背景画像にロゴを重ねる方法を教えてください。 現在、 htmlが以下の状態 <div class="dz_headbar"> <a href="test.html" target="_blank"><img src="title.gif" alt="ロゴ" " style="border:0"></a> </div> cssが以下の状態です。 .dz_headbar { background-image: url("3gradation.png"); background-position: left top; background-repeat: repeat-x; padding-top: 50px; } ヘッダー背景の3gradation.pngの上にロゴ画像であるtitle.gifを重ねたいのですがどうもうまくいきません。 ご教授いただける方何卒宜しくお願いします。

  • HTML
  • 回答数1
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
回答No.1

padding-top: 50px;が邪魔なだけだと思います。

gosanta21
質問者

お礼

kooooooool様 解決いたしました。 本当にありがとうございました！

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • CSSで３分割した背景画像を配置したいけど隙間が出来てしまう？

    初めて質問させていただきます。 当方はCSS初心者です。 画像（グラデーションのある角丸四角枠）を３分割し、それを背景画像として配置したいのですが、WinIE6などで表示するとどうしても画像に隙間ができてしまうのです。 IE7、FireFoxでは無事に希望通りに表示されています。 【HTML】 <div id="wrapper"> <div class="top"></div> <div class="middle"></div> <div class="bottom"></div> </div> 【CSS】 #wrapper{ width:680px; height:auto; border:0 auto; padding:0; } .top{ width:650px; height:10px; background-image:url(img/01.gif); background-position:top center; background-repeat:no-repeat; margin:0 auto; padding:0; } .middle{ width:650px; background-image:url(img/02.gif); background-repeat:repeat-y; margin:0 auto; padding:0; } .bottom{ width:650px; height:13px; background-image:url(img/03.gif); background-repeat:no-repeat; background-position:bottom center; margin:0 auto; padding:0px; } といった感じで、ざくっとwrapperの中に背景画像をセンターで敷きたいのです。 .topと.middleの間には隙間は出来ないのですが、.middleと.bottomの間に数pxの隙間が出来てしまうのです。 制作環境はDreamweaver8、MAC/OSXですが、動作確認はWin/XPでも行っています。 何卒ご教示下さい。

  • 背景画像だけをはみ出して表示させたい。

    CSSについて質問です。 よろしくお願いします。 CSSで背景画像だけをはみ出して表示させたいのですが、 やり方がわかりません。 例えば、exampleというIDをつけている要素があって、 中のテキストははみ出さずに背景画像だけをはみ出して表示させたいです。 ===CSS=== #example{ background-image:url(images/backimage.gif); background-repeat:no-repeat; } ===HTML=== <div id="example">背景だけはみ出したい！！</div> overflowを使うと中のテキストがはみ出してしまいますが、 何かいい方法はありませんでしょうか。 具体的には横幅180pxのサイドバーに182pxの背景画像を付けて 枠を作ろうとしています。 ご教示の程よろしくお願い申し上げます。

    • ベストアンサー
    • HTML
  • 背景に複数の画像を入れることは可能でしょうか

    HTML、CSSの初心者の者です。 下記のように、CSSで背景に画像back1.gifを右上に入れているのですが、画面の右下にもう一つの画像back2.gifを入れることは可能でしょうか？ もし可能なら、方法を教えて下さい。 初心者向けに易しくご説明頂けると幸いです。 body { background-color:yellow; background-image:url(image/back1.gif); background-attachment:fixed; background-repeat:no-repeat; background-position:right top; }

    • ベストアンサー
    • HTML
  • 背景画像を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
  • 背景画像を二つ指定

    こんにちは。 全体の背景画像(斜めストライプの柄)と、 コンテンツ部分に背景画像(白で両サイドに線)を別々に指定したいのですが、 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
  • 【jquery】スクロールで背景画像もついてくる

    よろしくお願いいたします。 jqueryを使って背景画像をスクロールと一緒についてくるようにしたいのですが、 思い通りにいかず、質問させていただきたいと思います。 やりたいと思っていることは、 まず背景画像1（1.jpg）をbodyにbackgroundに設定して、 その上に<div></div>タグで背景画像2（2.png：透過画像）をbackgroundに設定し、 背景画像2だけスクロールと一緒についてくるようにしたいと思っています。 現状のソースは以下になっています。 【html　head内】 <script src="jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $(window).scroll(function(){ var y = $(this).scrollTop(); $('#haikei').css('background-position', '50%'+ parseInt( y / 3 ) + 'px'); }); }); </script> 【html　body内】 <div id="haikei"> <div id="wrapper"> <div id="header"> 　～略～ </div> <div id="contents"> 　～略～ </div> </div> </div> 【CSS内】 #bg01 { background: url(2.png) top center repeat-y; } 今の状態だと、動き自体は思い通りに動いてくれるのですが、 背景画像を表示させたい位置がありまして、 <div id="header"></div>内には2.pngを表示させず、 <div id="contents"></div>の部分から2.pngを表示させて スクロールについてくるようにしたいと思っています。 下記のように、 <div id="wrapper"> <div id="header"> 　～略～ </div> <div id="haikei"> <div id="contents"> 　～略～ </div> </div> </div> と、<div id="haikei"></div>の位置を変えてみましたが、 これだとスクロールしたときに、<div id="header"></div>の下から 画像が途中からはみ出てくる？ような感じで、きれいにスクロールされません。 さらにCSSのrepeat-yをno-repeatに変えて試してみましたが、 その場合画像がページの一番下まで動いてくれません。 （途中までしか画像がついてきてくれない感じです） 方法としては、2.pngの表示開始位置を<div id="header"></div>より下に位置指定すれば うまくいくのかなと思ったのですが、書き方がわからず。。。 なにかうまくいく書き方はないでしょうか・・？ もしくは上記の方法以外でも、実現できそうなやり方や、 参考になりそうなサイトがあればお教えいただきたいと思っています。 ちなみに、私が参考にさせていただいたサイト様はこちらです。 http://www.webopixel.net/javascript/350.html わかりにくい点がありましたら、補足いたします。 どうぞよろしくお願いいたします。

  • 影付き(透過)ロゴタイトルの表示ないし背景との同調について

    影付き(透過)ロゴタイトルの表示ないし背景との同調について 只今HPを作成しているのですが、今回背景にボーダーを使い、その上にタイトルロゴを表示させようと思っています。デザイン的にそのロゴに影を付け、初めは.gifで透過保存させようと思ったのですが、荒々しい風に出来てしまいました。pngでは美しく出来たのですが、pngはネットブラウザ環境によっては表示されないと聞いたのであまり使いたくなくて・・・。 そこで今度はそのロゴにあらかじめボーダー画像を加えて、cssで上手に背景と溶け込ませて表示させようと思ったのですが、上手に表示出来ません。 ちなみにそのタイトルを表示させる部分は #wrapper{ margin:0px; padding: 0px; text-align: center; } #contents{ width: 880px; margin-left:auto; margin-right:auto; } で内包してあります。html上で簡単に書くと ・ ・ ・ <body> <div id="wrapper"> <div id="contents"> ここに画像タグ </div> </div> </body> といった感じです。 背景は横一列で固定するようにしています。 body{ font-size: 13px; line-height:160%; background-image: url(img/back.gif); background-repeat:repeat-x; background-position: 0% 0%; } こんな感じです。 CSSでこの問題を解決するか、それともgifで上手に透過画像を作るのか、はたまたpng保存で良いのか、分かりやすく解説して下さる方、宜しくお願いします。分かりにくーーい質問で申し訳ありません・・・。

    • ベストアンサー
    • CSS
  • 背景画像上にテキストを配置したボタンについて

    今晩は。 いつもお世話になっています。 CSSで次のようなボタンを作りたいと思っています。 ・背景画像の上にテキストを乗せたボタン。 1)ボタン上のテキストを書き換えられるようにしたい。 2)ボタンはページによって同じ背景画像でサイズを変えたい。（指定した縦横幅に合わせて背景画像がリサイズされるようにしたい） 3)背景画像ごとリンクにしたい。 参考サイトを見て、現在以下のようなボタンを作ってみました。 1、2はクリアできたのですが、ボタン上のテキストではなく、背景画像自体をリンクにするにはどうすればいいでしょうか？ また、色々方法はあると思うのですが、今回のようなボタンを作る上でもっと効率の良いCSSがあれば、参考サイト等教えて頂けると幸いです。 -------------CSS-------------- div.photo{ width:100px; height:50px; background-image:url("xxxx.png"); background-repeat:no-repeat; position:relative; background-size:contain; float:right; } .text{ width:100px; position:absolute; top:8px;left:10px; color:#ffffff; line-height: 1.2; font-size:15px; } ------------HTML------------- <div class="photo"> <div class="text"><a href="#">テキスト</a></div> </div> 以上になります。 よろしくお願い致します。

    • ベストアンサー
    • HTML
  • 背景画像上に複数枚の画像配置について

    お世話になります。 まだまだ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
  • 背景画像の指定方法

    少し調べたのですが、さっぱり原因が分からない為質問させていただきます。 外部CSSで背景画像を指定しているのですが、WinXP IE7で作製した所うまくいったのですが、別のマシン（WinXP IE6）で見ると表示の仕方が変わってきます。 参考ソース▼ 【外部CSS】----- .bg { width:300px; background-image:url(bg.png); background-repeat:no-repeat; background-attachment:fixed; background-position: bottom;} 【HTML】----- <div class="bg">長い本文</div> IE7だと、開いているウィンドウサイズに合わせて、見ている画面範囲の下部に背景画像が来るのですが、IE6の方だと、長い本文をスクロールしていった最後に、背景画像が表示される状態です。 分かりにくい説明かもしれませんが、アドバイスよろしくお願い致します。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する