画像をフルで表示させたい

Question

いつもお世話になっております。
下記コードのようにbackground-imageを使用して画像をフル表示させたいのですがなかなか上手く表示されません。ご教示お願いします。

html

<div id="photo">
<h1>プロフィール紹介サイト</h1>
<p>このサイトは自己紹介サイトです。</p>
<a href="index.html">お知らせ</a>
</div>

css

#photo {background-image: url(../img/kagoshima_ph_info001.jpg);text-align:center;padding-top:200px;padding-bottom:80px;
        background-repeat:no-repeat;background-position:50% 0;background-color:#3f8ad6;}
#photo h1 {color:#ffffff;font-size:50px;font-family:'Chango',cursive;text-shadow:0 5px 10px #000000;}
#photo p {color:#ffffff;font-size:20px;font-weight:bold;text-shadow:0 5px 10px #000000;}
#photo a {background-color:#ffaa00;padding:10px 80px;border-radius:10px;color:#000000;font-weight:bold;
          text-decoration:none;background-image:-webkit-linear-gradient(top,#ffe7b8 0% #ffaa00 100%);
          background-image:linear-gradient(to bottom,#ffe7b8,#ffaa00 100%);}
コード

Answer 1

background-size: cover;で全画面表示できませんか??

Comments

[haruniku]

できました！ありがとうございます。