初めて質問させていただきます。
初めて質問させていただきます。
趣味でWebページを制作しており,スタイルシートで背景画像のデザインの設定をしています。
Google Chromeでは意図どおり、真ん中に一枚だけ背景画像が表示されるのですが,IEやFirefoxでは画像が上部にずれ込んで表示されてしまいます。
これはどのように解決すればよいのでしょうか？
以下ソースを貼りつけます。よろしくお願いします。
＊＊以下ソース URL:http://tmmpg.net/bodytest.html＊＊
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Strict //EN”>
<HTML lang="ja">
<HEAD>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<TITLE>Javascript test page</TITLE>
<STYLE type="text/css">
body {
color: black;
font-family: "Bookman Old Style", sans-serif;
background: url("img/back2.png") center no-repeat;
}
div#header {
font-size: 35pt;
text-shadow:#666666 2px 2px 1.3px;
}
div#menu {
width: 3cm;
height: 15cm;
margin: 5cm,2cm;
padding: 5cm,2cm;
position: absolute;
top: 3cm;
left: 1cm;
font-size: 15pt;
}
div#footer {
position: absolute;
bottom: 2cm;
left: 1cm;
font-size: 10pt;
}
a {
color: black;
font-style: mormal;
text-decoration:none;
}
</STYLE>
</HEAD>
<BODY>
<div id="header">
TITLE
</div>
<div id="menu">
menu
</div>
<div id="footer">
footer
</div>
</body>
</html>
投稿日時 - 2010-07-16 16:13:25
質問者が選んだベストアンサー
変更した箇所だけ ということで<style>内のみ。右側に書き足した行に「←」印です。
<STYLE type="text/css">
html { height: 100%; } ←
body {
color: black;
font-family: "Bookman Old Style", sans-serif;
background: url("koganemini.jpg") center no-repeat;
height: 100%; ←
}
div#header {
font-size: 35pt;
text-shadow:#666666 2px 2px 1.3px;
}
div#menu {
width: 3cm;
height: 15cm;
margin: 5cm,2cm;
padding: 5cm,2cm;
position: absolute;
top: 3cm;
left: 1cm;
font-size: 15pt;
}
div#footer {
position: absolute;
bottom: 2cm;
left: 1cm;
font-size: 10pt;
}
a {
color: black;
font-style: normal;
text-decoration:none;
}
</STYLE>
投稿日時 - 2010-07-17 06:22:56
回答ありがとうございます。
試してみたところ,IE,Firefox,chrome,safari四種のブラウザで意図通り動きました。
ベストアンサーに選ばせていただきます。他の回答を頂いた皆様も,ありがとうございました。
投稿日時 - 2010-07-17 11:02:13
このQ&Aは役に立ちましたか?
6人が「このQ&Aが役に立った」と投票しています
回答（3）
