- ベストアンサー
背景として画面の上下に画像を固定。
この方のホームページでの質問ですが、 http://yuki930.v-colors.com/ 背景として、 上下に雲の画像を固定して、中をスクロールできるようになっていますが、 このように、上下の画像を画面に固定するには、どのようにcssを編集すれば良いのでしょうか? 宜しくお願いします。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (2)
固定したいエリアのＣＳＳに、position:fixed;を記述する。 上下だと、headerとfooterということになるかな？・・・ ************************************************* #header,footer{ background-img:url(claud.png); postion:fixed; } *************************************************
お礼
ありがとうございます。とても参考になります。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
サンプルです。 ★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# ) でチェック済みHTML4.01strictです。 ★タブは＿に置換してあるので戻す。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- html,body{margin:0;padding:0;} h1,h2,h3,h4,h5,h6,p{margin:0;line-height:1.6em;} p{text-indent:1em;} div.header,div.section,div.footer{width:100%;min-width:630px;margin:0 auto;padding:5px;} div.section{position:relative;} div.section div.section{width:auto;min-width:0padding-top:100px;} div.section h2,div.section p,div.section div.section{margin-left:160px;} div.section div.section p{margin-left:0;} div.section div.nav{position:absolute;top:105px;left:0;width:140px;} /* 上下に固定 */ div.header,div.footer{position:fixed;width:100%;} div.header{height:80px;top:0px;background-image:url(./images/background/topCloud.gif);z-index:100;} div.section{padding-top:100px;} div.footer{height:40px;bottom:0px;background-image:url(./images/background/topCloud.gif);} div.footer h2{display:none;} div.footer dt{float:left;font-weight:bold;} div.footer dt:after{content:" : ";} /* わかりやすいように */ body{background-color:gray;} div.section{background-color:white;} div.section div.section{min-height:1000px;} /* 画像をおく場合は以下は着色しない */ div.header{background-color:aqua;} div.footer{background-color:yellow;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p>本文はsection</p> ＿＿<div class="section" id="SUB_SECTION1"> ＿＿＿<h3>項見出し</h3> ＿＿＿<p>本文項記事</p> ＿＿＿<p>sectionの階層でレベルが判断される</p> ＿＿</div> ＿＿<div class="section" id="SUB_SECTION2"> ＿＿＿<h3>項見出し</h3> ＿＿＿<p>本文項記事</p> ＿＿＿<p>sectionの階層でレベルが判断される</p> ＿＿</div> ＿＿<div class="section" id="SUB_SECTION3"> ＿＿＿<h3>項見出し</h3> ＿＿＿<p>本文項記事</p> ＿＿＿<p>sectionの階層でレベルが判断される</p> ＿＿</div> ＿＿<div class="nav"> ＿＿＿<ol> ＿＿＿＿<li><a href="#SUB_SECTION1">1項</a></li> ＿＿＿＿<li><a href="#SUB_SECTION2">2項</a></li> ＿＿＿＿<li><a href="#SUB_SECTION3">3項</a></li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2013-03-03</dd> ＿＿</dl> ＿</div> </body> </html>
お礼
ありがとうございます。質問した内容以上にいろいろな発見をすることができました。感謝します。正しいHTMLの書き方などについてこれまで考えたことも無かったので、とても参考になりました。
お礼
ありがとうございます。質問した内容以上にいろいろな発見をすることができました。感謝します。正しいHTMLの書き方などについてこれまで考えたことも無かったので、とても参考になりました。