かなりハマってしまいまして、ご相談させて下さい。
添付画像の上の図になる形で下記コードにてhtml/cssを記載しました。
青のimg.bgはウィンドウ幅によって比率を保ったまま横100%で可変します。
containerの縦幅は決まっていて、img.bgがウィンドウ幅が横に広がっても、
container、contents、footerはz-indexで上に乗せ、あくまでもcontainerの
高さ600pxのみが表示できるようにしています。
通常のウィンドウサイズや縦にウィンドウを伸ばした場合は問題ないのですが
ウィンドウを横一杯に伸ばした時に(添付画像の下の図)footerの下から
img.bgが見えてしまいます。
wrapperで縦横100%の値にしていて、footerの背景画像もimg.bgを
隠せる十分な長さのものを用意しているのですが、最後のcopyrightを
入れた所から切れてしまいます。
横一杯に伸ばした際に、img.bgの長さに合わせてfooterで隠すには
どのようにしたら良いでしょうか?
ご指導の程、どうぞ宜しくお願い致します。
下記、不要部分は省いたcss/html記載いたします。
=====================
CSS
=====================
html,body{
width:100%;
height:100%;
position:relative;
}
#wrapper{
width:100%;
min-height:100%;
height:100%;
background-color:red:
position:relative;
}
body > #wrapper{
height:auto;
}
img.bg {
/* Set rules to fill background */
min-width:1000px;
min-height:586px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: absolute;
top:0;
left:0;
z-index: 0;
}
#container {
width:95%;
height:500px;
position: relative;
overflow: hidden;
z-index: 4;
}
#contents{
width:100%;
background-color: green;
position: relative;
z-index: 2;
}
#footer{
width:100%;
background: url(../img/footer_black.jpg) left top repeat-x;
background-color: black;
position: relative;
z-index: 3;
}
=====================
HTML
=====================
<html>
<head>...略...</head>
<body>
<div id="wrapper">
<img class="bg" src="img/blue_BG_pic.jpg" alt="" />
<div id="container">...略...</div>
<div id="contents">...略...</div>
<div id="footer">...略...</div>
</div><!--/wrapper-->
</body>
</html>
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
そもそもデザインのためにHTMLを作成しようとするから深みにはまる。
HTMLは文書構造を、プレゼンテーションはスタイルシートで・・・これが基本です。
CSS3にはbackground-sizeというプロパティがあり、それを使うのが本来の方法でしょうが、IE8以前は対応していませんので後方互換を考える場合は使いません。その代替手段として<img>を背景として使用すのは致し方ないでしょう。
この場合、footerをfixedで配置するのがセオリーです。また、oveflow:hiddenは内容がある要素には使わないほうが良いでしょう。
なお、wrapper,container,contentsような(意味的な)文書構造を示さないものより、article,header,section,footer,asideのような意味のあるものを、classで使用したほうが良いでしょう。
⇒DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
⇒3.1. 新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/h … )
将来、そのまま書き換えればHTML5としても利用できる。意味は上記リンクを参照。
footerをfixedで配置がセオリー、ありがとうございました。
下記のご回答者様へご返信したのですが、footerを下部にfixしてみたのですが、やはり大きな画面で横一杯のウィンドウサイズにすると画像は下からはみ出てしまいました。。。
あと質問内容とは関係ありませんが、そろそろhtml5に移行しようと思いつつもまだ手をつけておりませんでした。
今後は以降がスムーズに出来るよう、ORUKA1951さんの助言のように変更していこうと思います。
ありがとうございました。
No.1
- 回答日時:
この回答への補足
回答ありがとうございます!
さっそく試してみましたが、やはりウィンドウサイズを横一杯にすると
下から背景画像が出て来てしまいました。。。
下記、そのキャプチャです。
http://music333.oops.jp/test2/sample2.jpg
ちなみに教えて頂いたページを参考に作成したテストページは下記です。
http://music333.oops.jp/test2/test2.html
通常サイズのモニタなら問題ないのですが
私の使用している27inchで画面一杯にするとこの問題が出てしまいます。
おかしな部分などありましたらご指摘・ご指導頂けると幸いです。
どうぞ宜しくお願い致します。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- HTML・CSS imgとpを縦・横に中央揃えする 1 2023/01/17 11:30
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
imgタグは何で囲むのが良いか
-
画像をクリックして元に戻すには
-
【jQuery】複数の条件で絞った...
-
HTMLのIMAGEに。。
-
リンクを知らせる手のマークが...
-
ポップアップウィンドウのサイ...
-
チェックボックスの影
-
footerの背景が切れて、背景画...
-
inputタグでサーバにデータを送...
-
cssでrowの中で高さの違う左右...
-
プルダウンの選択リストの中に...
-
UDP通信を使うチャットプログラ...
-
htmlの文字が縦書きになる
-
HTML ul li で横並びにナビゲー...
-
【ヒトの神秘】美男美女から何...
-
HTML属性での「""」 「''」違い
-
htmlのolやulなどlistにtitleや...
-
CSSがなぜかfont-sizeだけ効か...
-
liタグの中に<p>タグやら<dl>を...
-
含む含まないという概念自体の...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ボタンをセル内一杯に表示させ...
-
リンクを知らせる手のマークが...
-
htmlで画像を2個ずつ並べていき...
-
ポップアップウィンドウのサイ...
-
画像のサイズが変わらない
-
XML画像データををHTMLで簡単に...
-
【HTML/CSS】ボタンの枠が伸び...
-
UDP通信を使うチャットプログラ...
-
リンクを選択したときの青い枠...
-
favicon.ico はもういらない?
-
table で画像をピッタリとくっ...
-
CSSの左横に隙間ができてしまい...
-
HTMLのIMAGEに。。
-
ホームページで画像を横に並べ...
-
画像とテーブルの隙間をなくす。
-
リンクをつけた画像をクリック...
-
HTMLは、シングルクォートかダ...
-
縦長広告をウェブページの右側...
-
c言語を用いて画像の透明度をあ...
-
ホームページタグ打ち。サイズ...
おすすめ情報