ホームページ > 記事 > ウェブフロントエンド > CSSで背景画像の位置を設定する方法

CSSで背景画像の位置を設定する方法

藏色散人オリジナル: 2021-04-25 10:02:0815051ブラウズ

CSS で背景画像の位置を設定する方法: 最初に HTML サンプルファイルを作成し、次に本文に div を作成し、最後に「background: url('/i/eg_bg_03.gif')no」を渡します。 -repeat leftbottom ;}" 背景画像の位置を設定するだけです。

CSSで背景画像の位置を設定する方法

この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、Dell G3 コンピューター。

CSS で背景画像の位置を設定するにはどうすればよいですか?

背景画像を使用する場合、背景画像の位置が希望どおりにならないことがよくあります。では、背景画像の位置を設定するにはどうすればよいでしょうか? CSSで背景画像の位置を設定する方法を見てみましょう。

背景画像の背景画像位置属性では、要素の背景画像の位置を制御するために、background-position が使用されます。次の 3 つの値を受け入れます:

キーワード: 上、右、下、左、中央など

長さの値: px、em、rem など。

パーセントvalue :%

background-position プロパティは、背景画像の開始位置を設定します。

このプロパティは、元の背景画像 (background-image で定義) の位置を設定します。背景画像を繰り返す場合は、この位置から開始されます。

#例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{width: 200px;height: 200px;
border:1px solid #ccc;
background: url(&#39;/i/eg_bg_03.gif&#39;) no-repeat left bottom;}
</style>
</head>
<body>
<div></div>
</body>
</html>

効果は次のとおりです:

CSSで背景画像の位置を設定する方法