下記URLのように、メニューやヘッダー背景だけをブラウザの横幅画面いっぱいに表示して、拡大や縮小しても、延々と表示されるようにしたいのですが、どのようにしたらよいか分かりません。
URL:http://j-sen.jp/
どなたかご教授頂けたら幸いです。
よろしくお願い致します。
A 回答 (3件)
- 最新から表示
- 回答順に表示
No.3
- 回答日時:
二重に枠を作って
※ 外枠に背景を横リピート
※ 内枠を幅指定+センターリング(標準モードで)
<!-- HTML -->
<!DOCTYPE html>
<html><body>
<div id="header"><div id="header2">ヘッダ</div></div>
<div id="content">コンテンツ</div>
<div id="footer"><div id="footer2">フッタ</div></div>
</body></html>
/* CSS */
body{ margin: 0;}
#header{ background: url(~~) repeat-x;}
#footer{ background: url(~~) repeat-x;}
#header2,#content,#footer2{ width:600px; margin: 0 auto; border:1px solid red;}
1、上記でも出来るし
2、BODYにheaderの背景画像とし、BODY直下に第二の疑似BODYの外枠(wrapper)を設置しfooterの背景画像でもよい。
その場合は、 background-position: 50% 100%; で最下部に背景画像を。
3、上記同様にhtmlとbodyに各2つの背景画像って手法もあるし。
No.2
- 回答日時:
それでは例を。
<!DOCTYPE html>
<html lang="ja">
<head>
<title></title>
<style type="text/css">
body {
margin: 0;
}
#header {
background-color:#ccf;
height:50px;
}
#content {
border:solid 1px #ccc;
height:400px;
width:600px;
margin:0 auto;
}
#footer {
background-color:#99c;
height:50px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
header
</div>
<div id="content">
main content
</div>
<div id="footer">
footer
</div>
</div>
</body>
</html>
1行目のDOCTYPE宣言は必要です、<html>で始めるとセンタリングできません。
No.1
- 回答日時:
横幅(width)を、100%(または指定しない)で、背景画像を横に繰り返して表示するだけですが。
中央は横幅を指定してセンタリング(margin:auto)します。
この回答への補足
ご回答いただきありがとうございます。また、お礼が遅くなり大変申し訳ございませんでした。
>横幅(width)を、100%(または指定しない)で、背景画像を横に繰り返して表示するだけですが。
⇒こちらは、ご指摘の通りにrepeatを使用して解決できました。
>中央は横幅を指定してセンタリング(margin:auto)します。
⇒こちらがどのような意味なのかが分からなかったのですが、よろしければ詳しく教えていただけないでしょうか?
教えていただいたにも関わらず、知識が乏しく、再質問してしまい申し訳ございません。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript ブラウザの横幅に応じてとある画像(e.jpg)を画面いっぱいに表示できるようにしたいです。(写真の横 1 2022/10/06 21:17
- Windows 10 zoomで自分の顔の背景 3 2023/06/07 22:34
- HTML・CSS 疑似要素で背景画像に指定したSVG画像の色変更 2 2023/01/30 22:45
- その他(ブラウザ) zoomのバーチャル背景が選べない 4 2022/12/08 12:38
- Excel(エクセル) 条件付き書式の設定方法を教えて下さい。 2 2023/04/14 18:12
- モニター・ディスプレイ WindowsノートPC 13.3で画面縮小したい 画面全体が見えない めり込んでしまってます 1 2023/01/22 13:42
- JavaScript jQueryでのレスポンシブが綺麗に動かない 3 2022/06/21 11:08
- JavaScript [Java] Edgeでのアドレスバー非表示について 3 2022/04/20 17:51
- その他(パソコン・スマホ・電化製品) Webページ印刷時にヘッダー・フッターをつけたい 1 2022/04/25 21:35
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ポップアップのソースの書き方...
-
フッター上部に謎の隙間
-
メニューやヘッダー背景だけを...
-
R、G、Bのスライドバーで色を変...
-
textareaで入力した文字を改行...
-
MAX関数を使ってからLEFT JOIN...
-
前回の質問の続き
-
jQueryスライドショー画像への...
-
画像の表示位置
-
JavaScript スライドの画像にリ...
-
デフォルト非表示にしたい。【t...
-
onclickとonmouseoverを同時に...
-
複数トリガーで動作するアコー...
-
window.openで値の渡し方を教え...
-
背景色を透明化
-
バッチファイルでカウントアッ...
-
ホームページビルダー15 メニュ...
-
画像をランダムな座標に一定の...
-
createElementが一瞬で消えてし...
-
タブで開いてさらにタブ内をア...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
フッター上部に謎の隙間
-
CSS <div>の入れ子が反映さ...
-
【CSS】floatで左右に並べた...
-
css固定したフッターが本文と重...
-
文字をクリックしたら別の文字...
-
textareaで入力した文字を改行...
-
オンマウス時に別画像を上に重...
-
スクロール可能なチェックボックス
-
文字を固定したいのですが…
-
1行で左寄せと右寄せと中央揃え...
-
Ctrl+F(検索)の窓を出したいの...
-
チェックボックスの背景色って...
-
Webサイト作成 プログレスバー ...
-
離れた場所にマウスオーバーで...
-
スタイルシートで画面を上下に...
-
メニューバーもスクロールに合...
-
ホームページのsidebar とconte...
-
CSSで背景を下までのばすには?
-
TABLEの高さを固定したいのですが…
-
かなり困っています。知恵を貸...
おすすめ情報