大阪のホームページ制作会社 株式会社TREVO
技術ブログ

CSSで背景を設定する方法

2020.03.23.

CSS

twitter Facebook Pocket LINE はてブ

株式会社TREVOの月額制ホームページ制作サービス
PR

ホームページ制作で背景画像や背景色の設定をすることがあります。
背景の設定は主にCSSで行い、backgroundプロパティを使うことで様々な細かい設定をすることができます。

背景色を設定

背景色の設定には、background-colorプロパティを使います。色の設定は、カラーネーム、カラーコード、RGBなどで設定ます。
background-color: カラーネーム、カラーコード、RGB;

■カラーネーム
background-color: black;

■カラーコード
background-color: #2539;

■RGB
background-color: rgb(255, 255, 128);

背景画像の設定

背景画像の設定はに様々な設定方法があります。細かい設定をすることでデザインの幅を広げることが出来ます。

■背景画像の設定
background-image: url(画像のパス);

■背景画像をリピートさせない
background-repeat: no-repeat;

■背景画像を横方向にリピート
background-repeat: repeat-x;

■背景画像を縦方向にリピート
background-repeat: repeat-y;

■背景画像の位置指定
画像サイズの設定はbackground-positionプロパティを使います。
background-position: 横位置 縦位置;のそれぞれの位置に数値かコードを記述します。
background-position: 30px 60px;

大阪のホームページ制作会社TREVOでは、ホームページ制作に関する情報を掲載しています。最短2日で仮サイトを公開するサービスやSEO対策に特化したホームページ制作、オリジナルホームページデザイン、ライティング、リスティング広告、WEBマーケティングなどのサービスをご紹介しています。

twitter Facebook Pocket LINE はてブ
お見積もり