Read Article

CSSのプロパティ(background-position)の使い方について知ろう10

広告

この章ではbackground-positionプロパティについて説明します。
background-positionプロパティは背景画像の「表示する位置」を指定します。219 英字指定の他にも220 のようにpxや%を使用した指定もすることが出来ます(数字と数字の間は半角の空白を開けてください)。
221の意味は左端から20%進んだ距離とそこから縦に30%進んだ距離が表示位置になります。
その他の指定方法として以下の英字も指定することができますので試してみてください。222 例えば「center top」は文字通り、真ん中の上という配置になります。
では例を見てみましょう。223224 では初めにbackground-positionを指定しないで表示させてみましょう。225 background-positionをrightに指定すると以下の通り、画像が右に位置されます。226 次はbackground-positionプロパティに数値で指定します。
初めに以下のようにbody要素にCSSを設定して、background-positionプロパティが無い状態を確認します。227 結果は以下の通りです。228 次に以下のようにbackground-positionプロパティの値をpx指定で記述します。229 結果は以下の通りです。230 左の数値は横の移動距離を指定する箇所ですが、この例では動かないので0を指定します。
右の数値は縦の移動距離を指定する箇所ですが、この例では20pxの距離を下に移動するのでプラスの数値で指定します。
マイナスの数値の指定もできますが、マイナスを指定すると上に移動させることができますが、この例の画像は一番上にありますので、マイナス指定をすると画像が消えてしまいます。
次は以下のようにbackground-positionプロパティの値を1つだけ指定します。
値を1つだけを指定した場合には水平方向の位置を指定したことになります。231 そして、値を1つだけを指定した場合には以下のように縦方向が50%指定されたのと同じ意味になります。232 結果は以下の通りです。233 次は水平方向の英字と垂直方向の英字を組み合わせて指定する方法です。234235 例えばこの例ではleft topと指定しているので左上を意味します。
結果は以下の通りです。236

URL :
TRACKBACK URL :
Return Top