背景色の固定
htmlとcssで掲示板サイトを作ろうと思っています。
背景部分に関して分からないのでご指導お願いします。
解決したいこと・やりたいこと
・背景色部分がスクロールになってしまう（逆に画像の書き込みだけスクロールするようにしたい）
・画面の大きさを変えても背景色がそのままであってほしい（スクロールはしない）
・真ん中に投稿された文字を並べたい
html
<!DOCTYPE html>
<html lang="jp" dir="ltr">
<head>
<meta charset="utf-8">
<title>新SNS_lime（仮）</title>
<link rel="stylesheet" href="common.css">
<link rel="stylesheet" href="SNS_lime.css">
</head>
<body>
<div class="header">
<div class="container">
<div class="header-center">
<div style="text-align: center">
<h1>新SNS_lime（仮）</h1>
</div>
<!-- "header-center"で"text-align: center"を囲む事で中央に表示 -->
</div>
<div class="header-right">
<a href="menu.html">メニュー</a>
<a href="timeline.html">タイムライン</a>
<a href="directmessage.html">DM</a>
<a href="video.html">動画</a>
</div>
<div class="clear"></div>
</div>
</div>
<div class="main-contents">
<div class="main-contents-text">
<h1 class="text">テキスト</h1>
</div>
<div class="main-contents-background">
</div>
</div>
<div class="footer">
<div class="container">
<div class="footer-left">
<p>テスト</p>
</div>
<div class="footer-right">
© 2022 新SNS_lime（仮）
</div>
<div class="clear"></div>
</div>
</div>
</body>
</html>
css
*{
margin:0;
padding:0;
}
/* cssリセットによりヘッダーの隙間を解消多分chromeとズレがあったらしい */
.header {
height: 87px;
width: 100%;
background-color: #ffe79e;
position: fixed;
top: 0;
}
.header-center {
height: 40px;
margin-top: 8px;
}
.header-right {
float: right;
}
.clear{
clear: both;
}
.header-right a {
line-height: 100%;
color: #5a5c5f;
margin-left: 5px;
font-size: 16px;
padding: 16px 5px;
}
.header-right a:hover {
background-color: #e2f1ff;
}
.container {
}
.main-contents-background {
background-size: 300px;
background-color: #fff7df;
}
/* divで囲っているからでしょうか？ */
.h1 {
text-align: center;
}
.footer {
position: fixed;
bottom: 0;
height: 120px;
width: 100%;
background-color: #2f3a44;
color: #e8e8e8;
padding-top: 20px;
}
.footer-left {
float: left;
}
.footer-right {
float: right;
padding-bottom: 8px;
}
0
