- 締切済み
背景設定をするとグローバルナビ・テキストが消えてしまいます
noname#83877の回答
よくわかりませんが、もしもボックスの重なりが原因ならposition:relative;を指定してz-indexをいじればなんとかなると思います。 どんなソースなのかわからないのでこれくらいしかわかりません。
関連するQ&A
- グローバルナビ部分の背景を画面幅いっぱいにしたいのですが、
グローバルナビ部分の背景を画面幅いっぱいにしたいのですが、 どうすれば良いのか分からなくて困っています。 まず、参考にしようとしているサイトが下記です。 http://www.oo-nagata.co.jp/ このサイトのようにグローバルナビ部分のとフッター部分の背景を画像で（画像ではなくても同じ事なのでしょうか、、。）画面幅いっぱいにしたいのですが、うまくいかなくて困っています。 ページの幅は960pxにCSSにて指定しているのですが、 幅を指定してしまうと当然その部分の幅は指定した幅になってしまいます。 よって背景画像は画面幅いっぱいにはならないのです。 ページの幅は指定し画面中央にくるようにしたいのですが、 どうすれば良いのでしょうか？
- ベストアンサー
- HTML
- CSSで背景画像を設定する
<html> <head> <title>--------</title> <style type="text/css"> body{background-image:url(image/-----.jpg)} </style> </head> ～～～ 画像を設定しましたが別のファイルではこの設定で表示できましたがこのファイルでは背景画像が設定できません。
- ベストアンサー
- HTML
- 背景画像上にテキストを配置したボタンについて
今晩は。 いつもお世話になっています。 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で背景画像だけをはみ出して表示させたいのですが、 やり方がわかりません。 例えば、exampleというIDをつけている要素があって、 中のテキストははみ出さずに背景画像だけをはみ出して表示させたいです。 ===CSS=== #example{ background-image:url(images/backimage.gif); background-repeat:no-repeat; } ===HTML=== <div id="example">背景だけはみ出したい！！</div> overflowを使うと中のテキストがはみ出してしまいますが、 何かいい方法はありませんでしょうか。 具体的には横幅180pxのサイドバーに182pxの背景画像を付けて 枠を作ろうとしています。 ご教示の程よろしくお願い申し上げます。
- ベストアンサー
- HTML
- CSSで、テキストのみの背景色を指定するには？
CSSで、テキストのみの背景色を指定するには？ ＣＳＳを使って、 h1 { color: orange; background: green; } とすると、<h1>タグで示されたテキストの行の背景色が緑色になりますが、 行全体ではなく、テキストのみの背景色を指定するにはどうすればよいでしょうか？
- 締切済み
- その他(ソフトウェア)
- ccsのテキストボックスの背景として、
ccsのテキストボックスの背景として、 textarea { /* 背景画像の指定 */ background-image: url("abc.jpg"); background-repeat: no-repeat; background-position: top center; /* テキストエリアのサイズ */ width: 400px; height: 150px; } といったものをよくみうけます。 しかしこの場合、abc.jpgの大きさが400×150を超える物（または未満）ですと、テキストボックスからはみでて（あるいは隙間が出てしまう）全て表示できません。 abc.jpgのサイズを変えず、cssの指定などではみ出さずに表示することは可能でしょうか？
- ベストアンサー
- ホームページ作成ソフト
- 背景画像の上にテキストを表示したい
はじめまして。 さっそくですが、背景画像の上にテキストを表示したいのですが、各ブラウザによってレイアウトにずれが生じてしまいます。 画像リンク（Network Servicesなど）は各ブラウザで確認してもレイアウトが崩れていないのですが、テキストリンク（aaaaaaaaaやbbbbbbbbなど）が思い切りずれてしまいます。 こちらまず背景画像をレイアウトし、その上に画像リンクやテキストを重ねてレイアウトしているのですが、作り方そのものが間違っているのでしょうか？それともcssの設定に問題があるのでしょうか？ 該当css部分は下記です。 #oslu_1a{ margin-top: 30px; margin-left: 23px; } #oslu_2a{ margin-top: -55px; margin-left: 270px; } #oslu_3a{ margin-top: -39px; margin-left: 515px; } なにとぞよろしくお願いいたします。m(_ _)m
- 締切済み
- CSS
- グローバルナビを固定にしたのですが、表示がおかしい
いつもお世話になっております 表題のとおり、 以下サンプルサイトの グローバルナビを固定にしたのですが、表示がおかしいです http://gcgtokyoroom.com/yk/ グローバルナビはしっかり付いてくるようになりましたが、 サンプルjs http://www.webdlab.com/template/fixednav/ 一旦トップに戻ると #mainImg部分が全て表示されなくなります、、、 恐らくcssの問題だと思うのですが、 正直あまりcssが分からず困っております。 ご教授お願いします、、、
- 締切済み
- CSS
- CSSのfilterでテキストまで透明化される
CSSのfilterプロパティで背景色だけでなくテキストまで透明化されてしまいます。 以下のように親divの中に子divを造り、その子divにテキストを入力し、 親divに設定した背景画像が子divに透き通って見えるように 子divにfilterプロパティを設定しました。 子divの背景色（白）が透明化され親divの背景画像が見えるようになったのはいいのですが、 背景色（白）だけでなくテキスト文字まで透明化されてしまいます。 テキスト文字だけ透明化されないように設定したいです。 ブラウザチェック：windows IE 8 です。 ******************************************************* 【XHTML】 <div class="test1"><div class="test2">テキスト</div></div> 【ＣＳＳ】 .test1{ width:300px; height:300px; background-image:url("image.jpg"); } .test2{ width:150px; height:50px; background-color:#ffffff; filter:alpha(opacity=30); ←背景色（白）が透明ぽくなるように設定 } ******************************************************* テキスト文字まで透明化されるので、さらにそのテキストをpタグで囲ってみましたが、 それでもテキストが透明化されている（親divのfilterがpタグまで継承されているから？）ので pタグにfilterプロパティで不透明を１００に戻すような設定をしてみましたが適用されません。 ************************* 【変更後】 *********************** 【XHTML】 <div class="test1"><div class="test2">テキスト</div></div> 【ＣＳＳ】 .test1{ width:300px; height:300px; background-image:url("image.jpg"); } .test2{ width:150px; height:50px; background-color:#ffffff; filter:alpha(opacity=30); ←背景色（白）が透明ぽくなるように設定 } p { filter:alpha(opacity=100); ←テキスト文字まで透明化されるのでpタグで囲って不透明１００に設定 } ******************************************************* ご指導のほどよろしくお願いします。
- ベストアンサー
- CSS