質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1538閲覧

background-imageで背景を設定したいのですが反映されません。

sutosi

総合スコア27

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/06/17 16:54

background-imageで背景を設定したいのですが反映されません。
bodyにbackground-imageを適用したのですが画像が何故かhead内のtopとbody内のfooterに適用されてしまいます
body内に適用したい場合どうしたらよろしいでしょうか?
------html-----------------------

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/font-awesome.min.css"> <!--インストールしたfontawesomeを読み込む--> <link rel="stylesheet" href="css/styles.css"> <!--作ったCSSを読み込む--> <meta bane="viewport" content="width=device-width, initial-scale=1.0"> <!--スマホで開いたとき度の幅で描画するかの設定--> <title>nitta</title> <div class="top"> <ul class="menu"> <li>PROFILE</li> <li>GRAPHIC</li> <li>MUSIC</li> <li>CONTACT</li> </ul> <p><img src="img/rogo.png"></p><!--ロゴ--> </div> </head> <body> <header> <section class="icon"> <p><img src="img/profile.png"></p> </section> <section class="profile"> <h2>PROFILE</h2> <div class="photo-show"> <img src="img/pro1.jpg"> <img src="img/pro2.jpg"> <img src="img/pro3.jpg"> <img src="img/pro4.jpg"> </div> <div class="item"> <p>自転車に乗ったり音楽やったりデザインをしています。</p> </div> </section> <section class="gra"><!--section2--> <h2>GRAPHICS</h2> <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> <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>
</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>

------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;
}
}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Takamoso

2017/06/17 17:45

ソースコードは</>ボタンで装飾してください。
guest

回答1

0

ベストアンサー

背景画像の表示より、まずはHTMLの構造を見直してみてはいかがでしょうか?

  1. <head>内に<div class="top">...</div>が有りますがこれは<body>内に記します。
  2. <header>内に<footer>が含まれるなど記述方法が推薦とは異なります。
  3. </div>が1個余分です。

背景が白色になるのは
section { background: #fff; }
が指定してあるからです。

投稿2017/06/17 23:29

rik

総合スコア1151

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問