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

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

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

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

HTML

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

CSS

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

Q&A

解決済

1回答

861閲覧

html css indexページにbackground imageを全て表示させたい

YuusukeArtRoom

総合スコア23

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

HTML

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

CSS

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

0グッド

0クリップ

投稿2020/01/23 06:06

前提・実現したいこと

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
これがページです

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

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

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

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

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

Lhankor_Mhy

2020/01/23 07:41

ページ全体に背景画像を置きたいなら、`body`に対して`background-image`を設定した方がいいかと思いますが、そういう話ではなく?
guest

回答1

0

ベストアンサー

私も勉強中の身ですので回答にはならないかも知れませんが、
いくつか記述の誤りがあるようです。
vsCodeで確認したら以下の2点が見つかりました。

1.<!DOCTYPE>の記述誤り
イメージ説明
2.<p>要素の終了タグ誤り
イメージ説明

投稿2020/01/23 09:28

PIGPEN

総合スコア36

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問