background-imageで背景を設定したいのですが反映されません。
bodyにbackground-imageを適用したのですが画像が何故かhead内のtopとbody内のfooterに適用されてしまいます
body内に適用したい場合どうしたらよろしいでしょうか?
------html-----------------------
</section> <section class="music"> </section> <section class="music"> <h2>MUSIC</h2> <div class="music-container"> <div class="music-wrapper"> <iframe width="560" height="315" src="https://www.youtube.com/embed/nul4IXdX8HE" frameborder="0" allowfullscreen></iframe><!--youtubeの埋め込みリンク--> </div> </div> </div>- </section> <section class="contact"> <h2>CONTACT</h2> </section> <footer> <p>上に戻る</p> <div class="sita"> </div> </footer> </header> </body> </html><div class="item"> <img src="img/gra2.jpg"> <p>hello. hello. hello. hello.</p> </div> <div class="item"> <img src="img/gra3.jpg"> <p>hello. hello. hello. hello.</p> </div> </div> <div class="container"> <div class="item"> <img src="img/gra1.jpg"> <p>hello. hello. hello. hello.</p> </div> <div class="item"> <img src="img/gra2.jpg"> <p>hello. hello. hello. hello.</p> </div> <div class="item"> <img src="img/gra3.jpg"> <p>hello. hello. hello. hello.</p> </div> </div> <div class="container"> <div class="item"> <img src="img/gra1.jpg"> <p>hello. hello. hello. hello.</p> </div> <div class="item"> <img src="img/gra2.jpg"> <p>hello. hello. hello. hello.</p> </div> <div class="item"> <img src="img/gra3.jpg"> <p>hello. hello. hello. hello.</p> </div> </div>
------css------
@charset "utf-8";
/* background-image: url("../img/wallpaper.jpg");*/
body{/初期設定、余計なmargin,paddingを0に/
font-size: 14px;
font-family: Verdana, sans-serif;
margin: 0;
padding: 0;
color: #333;
background: #f2f2f2;
background-image: url("../img/wallpaper.jpg");
/初期設定/
}
p{/行間がゆったりする/
line-height: 2;
}
.top {
width: 90%;
margin: 0 auto;
}
.menu > li {
display: inline-block;/横にする設定/
text-align: center;
cursor: pointer;
margin: 15px;
padding: 0;
}
.menu{
display: block;/要素の表示形式をしていするっぽい、ブロック要素を表示,,/
/46行目にheader-pc-menuを見えない設定をして、ここで820px以上いくとここで表示させる/
list-style: none;
padding: 0;
margin: 0;
/余計なマージンパディング取る、/
float: right;/mysiteも入っているheader-pc-menuの中に右にする設定/
}
.top img {
display: inline-block;/横にする設定/
width: 50px;
height: 50px;
text-align: left;
cursor: pointer;
}
.container{/ここで90%の意味はmysiteという上の文字や写真、写真のコメントなどをかこんでいて
左右に一定の空きができる/
width:80%;
margin: 0 auto;
}
section{
background: #fff;
padding: 60px 0;
}
section h2{/文字を中央ぞろえ、下にマージン空き/
text-align: center;
}
.icon{
padding: 100px 0;
}
.icon img{
display: block;
margin-left: auto;
margin-right: auto;
width: 150px;
height: 150px;
}
/PROFILE/
.profile .item{/newsの囲っているやつを中央揃え/
text-align: center;
}
.profile p{/テキストまで中央になってしまったのでここで解除する/
text-align: left;
}
/features同様アイテム同士の空き/
.profile .item{/写真と文字を囲っているfeaturesの下の空き/
margin-bottom: 10px;
}
.profile .item:last-child{/これにだけ指定という意味/
margin-bottom: 0;
}
/GRAPHICS/
.gra .container{
display: flex;
justify-content: space-between;/均等に余白が空く設定/
}
.gra .item{/graに入っている画像と文字に対して30%/
width: 30%;
text-align: center;
margin-bottom: 10px;
}
.gra .item img{/画像が30%だとちゃんと見えないので画像だけ100%に/
width: 100%;
}
.gra p{/テキストまで中央になってしまったのでここで解除する/
text-align: left;
}
.gra .item:last-child{/これにだけ指定という意味/
margin-bottom: 0;
}
/画像アニメーション/
.photo-show {
height: 440px; /表示したい大きさ/
margin: 30px auto; /縦余白30pxは任意/
max-width: 100%;
/position: relative;/
width: 300px; /表示したい大きさ、height と合わせる/
}
.photo-show img {
animation: show 8s infinite;
-webkit-animation: show 8s infinite;
border-radius: 50%;
/height: auto;/
max-width: 100%;
opacity: 0;
position: absolute; /画像を全て重ねる/
}
/アニメーション/
@keyframes show {
0% {opacity:0}
20% {opacity:1}
30% {opacity:1}
40% {opacity:0}
}
@-webkit-keyframes show {
0% {opacity:0}
20% {opacity:1}
30% {opacity:1}
40% {opacity:0}
}
/各画像のアニメーションの開始時間をずらす/
.photo-show img:nth-of-type(1) {
animation-delay: 0s;
-webkit-animation-delay: 0s;
}
.photo-show img:nth-of-type(2) {
animation-delay: 2s;
-webkit-animation-delay: 2s;
}
.photo-show img:nth-of-type(3) {
animation-delay: 4s;
-webkit-animation-delay: 4s;
}
.photo-show img:nth-of-type(4) {
animation-delay: 6s;
-webkit-animation-delay: 6s;
}
/*
.photo-show img:nth-of-type(5) {
animation-delay: 8s;
-webkit-animation-delay: 8s
}
.photo-show img:nth-of-type(6) {
animation-delay: 10s;
-webkit-animation-delay: 10s;
}
.photo-show img:nth-of-type(7) {
animation-delay: 12s;
-webkit-animation-delay: 12s;
}
.photo-show img:nth-of-type(8) {
animation-delay: 14s;
-webkit-animation-delay: 14s;
}*/
/マウスが画像に重なった際、動きを止めて四角くする/
.photo-show img {
transition: 0.2s;
-webkit-transition: 0.2s;
}
.photo-show:hover img {
animation-play-state: paused;
-webkit-animation-play-state: paused;
border-radius: 0;
}
/MUSIC/
.music-container{/ここで90%の意味はmysiteという上の文字や写真、写真のコメントなどをかこんでいて
左右に一定の空きができる/
width: 80%;
margin: 0 auto;
}
.music iframe{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.music-wrapper {/padding-topかbottomで%を指定するとcssで、widthに対する比率となる、56.25はyoutubeの16:9の比率を指定/
padding-bottom: 56.25%;
height: 0;
position: relative;
}
/画面が570px以上になったとき/
@media (min-width: 570px){
.container{
width: 570px;
}
.music-container{
width:570px;
}
}
/画面が570px以上になったとき/
@media (min-width: 820px){
.container{
width: 820px;
}
.music-container{
width:820px;
}
}
回答1件
あなたの回答
tips
プレビュー