背景画像を使って装飾する

背景画像を使って装飾する

ブラウザ全体の背景にストライプ模様の素材を設定する

  1. body要素に背景画像を設定する
    background-image [背景画像]
    [CSS]
    body {
        background-color:#FF00DD;
        background-image:url(../img/bg-stripe01.png);
    }
    
  2. 背景の繰り返し方向を指定する
    background-repeat [背景画像の繰り返し方向]
    値:repeat・repeat-x・repeat-y・no-repeat
    [CSS]
    body {
        background-color:#FF00DD;
        background-image:url(../img/bg-stripe01.png);
        background-repeat:repeat-x;
    }

映画紹介ブロックに背景画像を設定する

  1. HTMLソースに同じスタイル適用のためのclass名を設定する
    [HTML]
    <div class="frame">
    
    [CSS]
    .frame {
        margin:20px 0;
        padding:35px 30px 30px 30px;
        background-image:url(../img/bg-stripe02.png)
        background-repeat:repeat-x;
        background-color:#FBF9CC;
    }

今回の出来上がりページ


トラブルが発生した場合はすぐにお電話(050-5532-9970)ください。
迅速なトラブル解決だけでなく、パソコン購入アドバイスもしております。

パソコンレスキュー
三鷹市周辺のパソコン修理・トラブル解決ならお任せください!

返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA