CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSで背景位置を設定する

CSSのbackground-positionプロパティは、原点を基準にした背景画像の初期位置を設定するために使用されます。

構文

CSSbackground-positionプロパティの構文は次のとおりです-

Selector {
   background-position: /*value*/
}

次の例は、CSSのbackground-positionプロパティ-

を示しています。

例

<!DOCTYPE html>
<html>
<head>
<style>
div {
   margin: 30px;
   padding: 100px;
   background-image: url("https://www.tutorialspoint.com/images/C-programming.png"), url("https://www.tutorialspoint.com/images/Swift.png"), url("https://www.tutorialspoint.com/images/xamarian.png");
   background-repeat: no-repeat;
   background-position: 15% 20%, top, right;
   border: 1px solid;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>

出力

これにより、次の出力が得られます-

CSSで背景位置を設定する

例

<!DOCTYPE html>
<html>
<head>
<style>
p {
   margin: 20px;
   padding: 80px;
   background-image: url("https://www.tutorialspoint.com/images/dbms.png"), url("https://www.tutorialspoint.com/images/Operating-System.png");
   background-repeat: no-repeat;
   background-position: 0 0, bottom right;
   background-color: lemonchiffon;
}
</style>
</head>
<body>
<p>This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. </p>
</body>
</html>

出力

これにより、次の出力が得られます-

CSSで背景位置を設定する


  1. CSSを使用したテキストインデント

    CSS text-indentプロパティは、要素の最初の行のインデントを設定するのに役立ちます。 構文 CSStext-indentプロパティの構文は次のとおりです- Selector {    text-indent: /*value*/ } 例 次の例は、CSSのtext-indentプロパティを示しています。 <!DOCTYPE html> <html> <head> <style> div {    display: flex;    float: left;  

  2. CSSでのカラープロパティの設定

    CSSを使用して、要素のテキスト、境界線、背景の色を定義できます。 colorプロパティは、要素のテキストの色を指定するために使用されます。 構文 CSScolorプロパティの構文は次のとおりです- Selector {    color: /*value*/ } 次の例は、CSSカラープロパティ-を示しています。 例 <!DOCTYPE html> <html> <head> <style> div {    color: seashell;    background-color