前提・実現したいこと
html、cssを勉強して今練習としてオリジナルのサイトの作っています。
indexページにbackground-image を設定したのですが画面全体に表示されません。
画面全てにイメージを設定したいです。
こちらがそのページです
http://127.0.0.1:49505/index.html
発生している問題・エラーメッセージ
無し
該当のソースコード
『html』
<!DOCKTYPE html> <html> <head> <meta charset="utf-8"> <title>Yuusuke LeicaQ</title> <link href="https://fonts.googleapis.com/css?family=ZCOOL+QingKe+HuangYou&display=swap" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> </head> <body> <!-- header starts--> <header> <div class="logo"> <a href="index.html"><img src="images/IbfvEhdD.png" alt="YuusukeLeicaQ"></a> </div> <nav class="global-nav"> <ul> <li><a href="photos.html">photos</a></li> <li><a href="portfolio.html">portfolio</a></li> <li><a href="information.html">infomation</a></li> </ul> </nav> </header> <!-- header ends--> <!-- wrap starts--> <div id="index"> <div class="content"> <h1>Welcome to LeicaQ Photo Gallery!</h1> <p class="p1">This is an web site to exhibit, enjoy and deal photos which I have taken around the world.<br>ALL the photos are taken by LeicaQ. Enjoy the amazing quality photos!<p/><p class="p2"><br>ライカQギャラリーへようこそ。このウェブサイトはライカQで撮った写真を展示、鑑賞、購入するためのサイトです。全ての写真はライカQで撮られています。魅力的なライカの写真たちを楽しんでください。</p><P class="btn"><a href="photos.html">Photos</a></P> </div> </div> <!-- wrap ends--> <!-- footer starts--> <footer> <small>2019 Yuusuke-art-room</small> </footer> <!-- footer ends--> </body>『css』
@charset "utf-8";
body {
margin: 0;
padding: 0;
background-color: darkgrey;
color:dimgray;
font-size: 25px;
line-height: 2;
}
p,h1,h2,h3,h4,h5,h6 {
margin-top: 0;
}
img {
vertical-align: bottom;
}
ul {
margin: 0;
padding: 0
}
a {
color:cadetblue;
text-decoration: none;
}
a:visited {
color:dimgray
}
a:hover {
text-decoration: underline;
}
header {
width: 960px;
height: 100px;
margin: 0 auto;
}
.logo {
float: left;
margin-top: 55px;
}
.globa-nav {
float: right;
margin-top: 60px;
}
.global-nav li {
float: left;
margin: 65px 10px 6px 85px;
list-style: none;
font-family: 'ZCOOL QingKe HuangYou', cursive;
}
.global-nav li a {
color: whitesmoke;
}
.global-nav li a:hover {
color:black;
text-decoration: none;
}
#wrap {
clear: both;
}
.content {
width: 960px;
margin: 0 auto;
}
footer {
text-align: center;
color: whitesmoke;
padding: 20px;
}
footer small {
font-size: 15px;
font-family: 'ZCOOL QingKe HuangYou', cursive;
}
#index h1 {
font-family: 'ZCOOL QingKe HuangYou', cursive;
font-size: 70px;
color: whitesmoke;
margin-bottom: 0;
}
#index .p1 {
font-family: 'ZCOOL QingKe HuangYou', cursive;
font-size: 30px;
color: whitesmoke;
line-height: 1;
margin-bottom: 0;
}
#index .p2 {
font-family: 'ZCOOL QingKe HuangYou', cursive;
font-size: 20px;
color: whitesmoke;
margin-bottom: 60px;
}
#index .content {
margin: 120px auto 120px;
}
.btn a {
background-color:floralwhite;
color:palevioletred;
font-size: 47px;
font-family: 'ZCOOL QingKe HuangYou', cursive;
display:block;
width: 200px;
text-align: center;
line-height: 50px;
margin-top:50px;
border-radius: 8px;
border: 5px solid floralwhite;
}
.btn a:hover {
text-decoration: none;
background-color: whitesmoke;
color:crimson;
}
#index {
background-image: url(../images/IMG_1990.JPG);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-attachment: fixed;
}
試したこと
height を変えてみたりしたのですがうまく機能しませんでした
補足情報(FW/ツールのバージョンなど)
http://127.0.0.1:49505/index.html
これがページです
回答1件
あなたの回答
tips
プレビュー