Q&A
背景画像がきっちりと常に全体に表示される場合を除き、上部や下部、あるいは中央部分を表示させたい時に「background-position」を使うことで、1枚の背景画像からデザインの幅を広げることが出来ます。
CSSで背景画像を設定する場合について、疑問点がありご助言頂きたいです。
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet"> 7 <link rel="stylesheet" href="style.css"> 8 <title>サンプル</title> 9</head> 10<body> 11 <section class="conA"> 12 <div class="container"> 13 <h1>LOGGER</h1> 14 <p>美味しく楽しくライフログ</p> 15 </div> 16 </section> 17</body> 18</html>
css
1@charset "UTF-8"; 2 3/*基本色 */ 4 5:root{ 6--main-color:#5D9AB2; 7--accent-color:#BF6A7A; 8--dark-color:#2B5566; 9} 10 11body{ 12 font-family:'メイリオ', 13 'Hiragino Kaku Gothic Pro', 14 'sans-serif'; 15} 16/* コンテンツA : ヒーローイメージ */ 17.conA { 18 background-image:url(img/fruits.jpg); 19 /* background-position:center; 20 background-size:cover; */ 21 background-repeat: no-repeat; 22 text-align:center; 23 24} 25.conA h1{ 26 text-align: center; 27 margin-top:0; 28 margin-bottom:10px; 29 font-family: 'Montserrat','sans-serif'; 30 font-size:15vw; 31 letter-spacing:0.2em; 32 margin-left:0.2em; 33} 34.conA p{ 35 margin-top:0; 36 margin-bottom:0; 37 font-size:18px; 38} 39 40@media (min-width:768px){ 41 .conA h1{ 42 font-size:115px; 43 } 44 45 .conA p{ 46 font-size:24px; 47 } 48}
上記のコードを実行した結果は以下の通りです。
しかし、CSSのbackgroundの設定を下記のように変更しますと、画像の表示部分が変更されます。
background-position:center; background-size:cover; /* background-repeat: no-repeat; */
background-sizeプロパティについては調べたのですが、何故画像の表示部分に違いが出てしまうのかが分からなかった為、ご質問させて頂きました。
表示に違いが出てしまう理由につきまして、ご助言頂けましたら、幸いです。
追記です。
フルサイズの元画像の方も記載させて頂きます。
回答2件
0
いろんなことを同時にやっているため混乱しています。
（positionとsizeを同時に有効にしてますし）
Googleフォントも解除してミニマムコードで1つずつ確認してください。
動きを確認したのでしたらなおさらです。
Html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <link rel="stylesheet" href="style.css"> 6 <title>サンプル</title> 7</head> 8<body> 9 <section class="conA"> 10 <h1>test</h1> 11 </section> 12</body> 13</html>
css
1.conA { 2 background-image:url(img/fruits.jpg); 3 text-align:center; 4}
↓
css
1.conA { 2 background-image:url(img/fruits.jpg); 3 background-size:cover; 4 text-align:center; 5}
↓
css
1.conA { 2 background-image:url(img/fruits.jpg); 3 background-position:center; 4 text-align:center; 5}
↓
css
1.conA { 2 background-image:url(img/fruits.jpg); 3 background-position:center; 4 background-size:cover; 5 text-align:center; 6}
ただ、画像が一部分しか表示されない領域しかないので、bodyに対して指定して確認すればもうちょっとそれぞれの挙動が理解しやすくなるかもしれません。
投稿2019/08/11 01:17
総合スコア80850
0
自己解決
恐らくなのですが、backgroun-sizeを指定しなかった場合は、「auto」になるため、画像の上部が表示され、background-sizeにcoverを指定し、background-positionにcenterとしたことで、画像の中央部が表示された、といったことが理由だと解釈できました。
投稿2019/08/11 01:13
編集2019/08/11 01:15
総合スコア178
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。