HTML 背景画像の表示方法

背景画像をフルスクリーンで表示させたい__### __

以下の画像を表示させたい

html
1コード

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>WCB Cafe</title> <meta name="description" content="ブレンドコーヒーとヘルシーなオーガニックフードを提供するカフェ">

<limk rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
<link href="https://fonts.googleeapis.com/css?family=Philosopher" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

</head> <body> <div id="home" class="big-bg"> <header class="page-header wrapper"> <h1><a href="index.html"><img class="logo" src="images/logo.svg" alt="WCBカフェ　ホーム"></a></h1> <nav> <ul class="main-nav"> <li><a href="news.html">News</a></li> <li><a href="menu.html">Menu</a></li> <li><a href="contact.html">Contact</a></li> <ul> </nav> </header>

<div class="home-content wrapper">
  <h2 class="page-tytle">We'll Make Your Day</h2>
  <p>おしゃれなカフェで癒されてみませんか？無添加の食材で体の中からリフレッシュ。</p>
  <a class="button" href="menu.html">メニューを見る</a>
</div><!--/.home-content -->

</div> </body> </html> ``` CSS @charset "UTF-8";

/* 共通部分
------------------------------- */
html {
font-size: 100%;
}
body{
font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
line-height: 1.7;
color: #432;
}
a {
text-decoration: none;
}
img {
max-width: 100%;
}

.logo{
width:210px;
margin-top: 14px;

}

.main-nav{
display: flex;
font-size: 1.25rem;
text-transform: uppercase;
margin-top: 34px;
list-style: none;
}

.main-nav li{
margin-left: 36px;

}

.main-nav a{
color:#432;

}

.main-nav a:hover{
color:#0bd;
}

.page-header{
display: flex;
justify-content: space-between;

}

.wrapper{
max-width: 1100px;
margin: 0 auto;
padding: 0 4%;
}

.home-content{
text-align:center;
margin-top: 10%;

}

.home-content p{
font-size: 1.125rem;
margin:10px 0 42px;

}

/* 見出し　*/

.page-tytle{
font-size: 5rem;
font-family: serif;
text-transform: uppercase;
font-weight: normal;

}

/* ボタン　*/
.button{
font-size: 1.375rem;
background:#0bd;
color: #fff;
border-radius: 5px;
padding: 18px 32px;

}

.button:hover{
background: #0090aa;
}

.big-bg{
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
}

#home{
background-image: url(./images/main-bg.jpg);
min-height: 100vh;

}

#home .page-title{
text-transform:none;
}

コード


以上です。よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

フルスクリーンで…というのは画面いっぱいに表示させたいという事で良いのでしょうか？

・・・だとしたら以下のような感じでどうでしょうか。

css
1body{
2    font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
3    line-height: 1.7;
4    color: #432;
5    background-image : url(ファイルへのパス);
6    background-attachment : fixed;
7    background-position : center center;
8    background-size : cover;
9}
10

まずbackground-image:url(ファイルへのパス);で背景画像を表示させます。

でもこれだとスクロールに合わせて背景画像も上下します。そこでbackground-attachment:fixed;を指定します。これで背景画像は固定されました。

まだ画面の横幅を狭くしていくとコーヒーが見切れてしまいますのでbackground-position:center center;を指定しました。上下の位置までcenterにしたのは何となくです。

最後にbackground-size : cover;にして、画面いっぱいに画像が表示されるようにしました。
これも好みの問題かも知れません。「css background-size」とか検索してどんな事ができるか色々試した上でbackground-sizeは選んでいただくのがよろしいかと思います。

蛇足ですが、HTMLもマークダウン記法を使って書きましょうね、ミスっただけだと思いますが修正は可能です。

投稿2020/03/05 15:34