- ベストアンサー
スタイルシートで背景画像を固定のまま最前面へ
フレームで割ったページを作ろうとしています。 上フレームにロゴなどがあり、下フレームにはみ出すようにデザインしました。 もちろん、下フレームはスクロールするので、background-positionで上に固定リピート無しとしました。 ただ、この状態だと、ロゴの上にコンテンツがきてしまいますよね。 どうにかして、ロゴの下にコンテンツが来るようにできないでしょうか?(ロゴの下にもぐりこむ感じ) 無理なら無理でOKです。「できません」と回答をください。
- master-3rd
- お礼率39% (524/1325)
- CSS
- 回答数4
- ありがとう数2
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
> 上フレームにロゴなどがあり、下フレームにはみ出すようにデザインしました。 状況がよくわかりませんが、<frameset>ならフレームを超えることはないはずなのですが、、、 たとえば高さ100pxのロゴマークを表示するのに、 上80pxを上フレームに、 下20pxを下フレームのbackground-imageに指定している、、ということでしょうか？ コンテンツがロゴマークに隠れるなら、結局、全部上フレームにしているのと同じ事だと思うのですが、、、 上フレームに記述するのではダメなのでしょうか？ > (ロゴの下にもぐりこむ感じ) position:fixedを使えば簡単なのですがIEが対応していないと言うことで、 通常はJavaScriptを使わないと行けないのですが、 DOCTYPEを記述しなくても良いなら、以下のスタイルで作れます。 （未検証ですが、こんな感じだったと思います。FirefoxやSafariで表示位置がずれるかも、、、） <BODY>にmarginやpaddingを0px以外に指定すると、スクロールバーの位置が妙なことになるので、0pxにした方が良いです。 .title{ position:absolute; top:0px; left:0px; width:100%; height:100px; text-align:center; z-Index:2; } .contents{ position:absolute; top:0px; left:0px; width:100%; height:100%; overflow:auto; z-Index:1; padding-top: 100px; } <body> <div class="title"> <img src="title.jpg" alt="タイトル＆ロゴマーク"> </div> <div class="contents"> 本文 </div> </body>
その他の回答 (3)
- NYOI
- ベストアンサー率58% (56/96)
↓>No3さん 多分ロゴの下部分が平坦でなく、ぎざぎざになってるような感じで、部分的に文字が隠れたり隠れなかったり、な風味を出したいんだと思います。
- NYOI
- ベストアンサー率58% (56/96)
参考URL先のような感じで、上部にロゴを出して～って感じでしょうけど、これだと少し遅延がありますし、やっぱり難しいでしょうね(´・ω・`)
- NYOI
- ベストアンサー率58% (56/96)
背景画像というより、前景画像といった感じでしょうね。 しかしhtmlタグやスタイルシートだけでは実装できそうにないです。 JavaScriptなら何とか書けるかもしれませんが…。
お礼
返答ありがとうございます。 >JavaScriptなら ちなみにどうしたらいいのでしょうか?
関連するQ&A
- ２つの背景画像固定がうまくいきません
(1)一番下に細かい画像をrepeatさせた背景を、 (2)その上に大きい画像をno-repeatで中央に表示させ、 どちらも固定させて、その上にテキストやテーブルを表示したいのですが、(2)のbackground-attachment : fixed だけうまくいかずスクロールされてしまいます。 過去の質問に同様の内容があり、それへの回答を参考にしたのですが・・・。 http://oshiete1.goo.ne.jp/qa1133735.html どなたか解決方法を教えて下さい。
- ベストアンサー
- ホームページ作成ソフト
- 2つ画像を背景にするスタイルシートってある？
1つの画像をスタイルシートで背景にするのは、知ってるんですが、2つの画像を同じページに背景にはできるのでしょうか？下記は1つの画像を背景にするスタイルシートです。これのどこかをいじれば可能なのでしょうか？ <STYLE TYPE="text/css"> <!-- BODY { background-image:素材のURL; background-position:0% 100%; background-repeat:no-repeat; background-attachment:fixed; } --> </STYLE>
- 締切済み
- CSS
- CSSで背景画像の固定
よろしくお願いいたします。 現在、WEBページを制作しておりまして CSSで背景画像を固定する方法で悩んでいます。 通常、背景画像を固定する際、 #contents { display:block; width:500px; height:500px; margin:0; background-image:url(img/hoge.jpg); background-repeat:no-repeat; background-attachment:fixed; background-position:bottom; } この様な感じで可能だと思うのですが、 今回やりたい事が出来ずに悩んでいます。 やりたい事が私の文章力では説明で伝わるか わかりませんので画像にしてみました。 図Aの様に「#contents」のブロック内の下段に固定に したいと思っているのですが、 実際上記の様なCSSの記述ですと図Bの様に ウィンドウの高さに対しての下段固定になってしまい ウィンドウを伸ばすと、「#foot」ブロックの後ろに 回ってしまい全体を表示してくれません。 どなたか、解決方法がおわかりになる方 ご教授願えますでしょうか。 また、過去同じ質問がありましたら、 お手数おかけいたしますがご誘導願えますでしょうか。 よろしくお願いいたします。
- ベストアンサー
- HTML
- スタイルシートで・・・
スタイルシートを使った掲示板の背景を固定させたいと思います。 「background-repeat: repeat-y; background-position: center・・・」 上記がその掲示板の背景の変更欄なんですが、repeatじゃなくfixedと入れてみましたが固定されません。 どうしたら背景が固定されますか？ わかる方お願いします！
- ベストアンサー
- HTML
- ページがスクロールするのについてくる背景画像
わからなくて困っています。 どなたか分かる方教えてください。 トップページのトピックス部分をインラインフレームで表示させる作りにしました。 インラインフレームの表示部分は310*200です。 表示させる部分なので、トピックスの背景も310*200で作ってcssで固定させました。 表面的にはＯＫなのですが、ページをスクロールすると背景画像が見えなくなってしまいます。 background-repeat: no-repeat; にしてあるのですが、repeatにできない画像なので、困っています。 ページをスクロールするとついてくる背景画像にしたいのですが、どうすればできますか？ cssかjavaでできるでしょうか？ 教えてください。 よろしくお願いします。
- ベストアンサー
- JavaScript
- グラデーション背景と画像固定背景
こんにちは。 ホームページ作成初心者の者なのですが、ページの背景をグラデーション背景の上に固定した画像背景を乗っけようと考えているのですが、グラデーション背景のタグを入れると画像背景のタグが無効になってしまいます。この二つを同時に有効にする事は不可能なのでしょうか。 ちなみにタグは <HEAD> <STYLE> <!--BODY { background-image : url(back2.gif) ; background-repeat : no-repeat ; background-position : 90% 90% ; background-attachment : fixed ;} --> </STYLE> <STYLE> <!-- body{ filter:progid:DXImageTransform.Microsoft.Gradient (startcolorstr='#68b4ff',endcolorstr='#ffffff',gradienttype='1') } --> </STYLE> （省略） </HEAD>
- ベストアンサー
- ホームページ作成ソフト
- 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の上には文字を重ねたいと考えているのですが、そのようにタグを編集してもうまく表示できません。 ご回答よろしくお願いいたします。
- ベストアンサー
- ホームページ作成ソフト
- CSS/背景画像をセンタリングした際に、スクロールバーの有無で位置が変わってしまうのを防ぐには？
背景画像を中央で縦に並べる形でサイトを作っております. background-repeat:repeat-y; background-position:50%（或いはcenter) ページによって、スクロールバーの有無があるのですが、これによって（バーの幅による）中央の背景位置に微妙なズレが生じてしまいます。 フレーム使用のため少々対応に困っております. スクロールバーをどのページでも出す、背景画像をpx指定、これ以外に何か方法はあるものでしょうか？ よろしければお教えいただければありがたく思います.
- 締切済み
- HTML
- スマホブラウザでの背景固定
以下のＣＳＳで背景画像を固定しようと思っています。 ＰＣでは問題なく固定されるのですが、スマホだと 背景画像が固定されず、画面をスクロールすると一緒にくっついてきます。 スマホの場合は別の対処が必要なのでしょうか？ body { margin:0 auto; text-align:center; padding:0; background: url(../images/photo01.jpg); background-repeat:no-repeat; background-position:center bottom; background-attachment:fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
- ベストアンサー
- CSS
- IE6でスクロールさせないフレームのスタイルシート
上下2段のフレームをスタイルシートで作成して、 下の方の段(mainbox)だけはスクロールさせ、 上の段(header)はスクロールさせないで固定させたいのですが、 以下のCSSでは、Geckoで表示させると意図通り 上の段が固定されるのですが、IE6では上下段とも 一緒にスクロールしてしまいます。 タグを色々試して、Webも検索してみましたがギブアップです。 どのようにすればIE6で上の段を固定したまま、 下の段だけスクロールできるのでしょうか？ body {margin:0; padding:0; height: 100%; } #header{ background-color: #2F2; position: fixed; top: 0; left:0; height: 60px; width: 100%; z-index: 10; } #mainbox{ background-color: #7F7; margin: 60px 0 0 0; _margin: 0 0 0 0; overflow: auto; }
- ベストアンサー
- HTML
お礼
ビルダー上でみると、ちょっと変ですが、ブラウザ上ではいい感じに下に沈んでいきました! ありがとうございました。