footerの背景が切れて、背景画像が見えてしまう

締切済

質問者：watermusic333
質問日時：2013/01/21 20:02
回答数：2件

かなりハマってしまいまして、ご相談させて下さい。

添付画像の上の図になる形で下記コードにて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>
</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： ORUKA1951
回答日時：2013/01/22 14:49

そもそもデザインのために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としても利用できる。意味は上記リンクを参照。

- 0
- 件

通報する

この回答へのお礼

footerをfixedで配置がセオリー、ありがとうございました。
下記のご回答者様へご返信したのですが、footerを下部にfixしてみたのですが、やはり大きな画面で横一杯のウィンドウサイズにすると画像は下からはみ出てしまいました。。。

あと質問内容とは関係ありませんが、そろそろhtml5に移行しようと思いつつもまだ手をつけておりませんでした。
今後は以降がスムーズに出来るよう、ORUKA1951さんの助言のように変更していこうと思います。

ありがとうございました。

通報する

お礼日時：2013/01/23 22:50

No.1

回答者： oyukitya-n
回答日時：2013/01/22 14:39

URLを貼っておいたので、

URL先の事をやってみてください。

参考URL：http://css-eblog.com/csstechnique/footer-positio …

この回答への補足

回答ありがとうございます！

さっそく試してみましたが、やはりウィンドウサイズを横一杯にすると
下から背景画像が出て来てしまいました。。。

下記、そのキャプチャです。
http://music333.oops.jp/test2/sample2.jpg

ちなみに教えて頂いたページを参考に作成したテストページは下記です。
http://music333.oops.jp/test2/test2.html

通常サイズのモニタなら問題ないのですが
私の使用している27inchで画面一杯にするとこの問題が出てしまいます。

おかしな部分などありましたらご指摘・ご指導頂けると幸いです。
どうぞ宜しくお願い致します。