CSSで背景画像の出力

投稿日：2016年3月3日更新日：2020年5月17日

最近はやりのWEBデザインでよくある、大きな背景画像のなかにユーザー名とパスワードを入力させるような画面の作成方法について。

<div id="input_area">
 
        <form action="" name="loginForm">
       	    <input type="text" name="user_name"  size="30" maxlength="50" />
　          <input type="password" name="password"  size="12" maxlength="12"  />
            <input type="submit" class="btn btn-primary btn-large" value="ログイン" />
        </form>
</div>

</form>

</div>

基本的なhtmlを上記のように組むとします。

もちろんidのセレクタに背景画像をbackgroundで設定します。

cssは下記のように組むことが一般的です。

#customer_login{
    padding: 0.5em;
    margin:0 auto;
　  /* このプロパティで固定にします */
    position: relative; 
    width: 908px;
    height: 500px;
    text-align: center;
    font-size:18pt;
    color: #000;
    background-image: url(../images/customer_login_back.jpg);
    /*画像のサイズを調整したい場合は下記のようにサイズを決定します。*/
    background-size: 454px 450px;
    /*画像の位置ぞろえに関しては下記のようなプロパティで設定します。*/
    background-position: center 40px;
    background-repeat: no-repeat;
}

#customer_login{

padding: 0.5em;

margin:0 auto;

　 /* このプロパティで固定にします */

position: relative;

width: 908px;

height: 500px;

text-align: center;

font-size:18pt;

color: #000;

background-image: url(../images/customer_login_back.jpg);

/*画像のサイズを調整したい場合は下記のようにサイズを決定します。*/

background-size: 454px 450px;

/*画像の位置ぞろえに関しては下記のようなプロパティで設定します。*/

background-position: center 40px;

background-repeat: no-repeat;

}

プロパティの細かい参照の仕方などは下記リンクを参考に。

背景画像の拡大・縮小 → background-size !