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

CSSの背景プロパティ

CSSの背景プロパティは、要素の背景のスタイルを設定するのに役立ちます。 CSSのbackgroundプロパティは、要素の背景を指定するための省略形です。 background-color、background-image、background-repeat、background-position、background-clip、background-size、background-origin、background-attachmentが一緒になって、CSSの背景プロパティを構成します。

構文

CSSバックグラウンドプロパティの構文は次のとおりです-

Selector {
   background: /*value*/
}

例

次の例は、CSSの背景プロパティ-

を示しています。 
<!DOCTYPE html>
<html>
<head>
<style>
#main {
   margin: auto;
   width: 300px;
   background-image: url("https://www.tutorialspoint.com/hadoop/images/hadoop-mini-logo.jpg");
   background-repeat: no-repeat;
   background-size: cover;
}
#im {
   height: 200px;
   width: 200px;
   background-image: url("https://www.tutorialspoint.com/images/css.png");
   background-repeat: no-repeat;
   background-position: center;
}
</style>
</head>
<body>
<div id="main">
<div id="im"></div>
</div>
</body>
</html>

出力

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

CSSの背景プロパティ

例

<!DOCTYPE html>
<html>
<head>
<style>
body {
   background-image: url("https://www.tutorialspoint.com/hcatalog/images/hcatalog-mini-   logo.jpg"),url("https://www.tutorialspoint.com/hbase/images/hbase-mini-logo.jpg"),url("https://www.tutorialspoint.com/hadoop/images/hadoop-mini-logo.jpg");
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-position: 10% 10%, 40% 40%, 90% 10%;
}
</style>
</head>
<body>
</body>
</html>

出力

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

CSSの背景プロパティ


  1. CSSマージンプロパティ

    CSSマージンプロパティは、margin-top、margin-right、margin-bottom、およびmargin-leftの省略形です。これにより、要素の周囲のスペースを指定できます。個々の辺にマージンを設定することもできます。 構文 CSSマージンプロパティの構文は次のとおりです- Selector {    margin: /*value*/ } 例 次の例は、CSSマージンプロパティ-を示しています。 <!DOCTYPE html> <html> <head> <style> div {   &n

  2. CSSを使用して背景を繰り返す

    CSSのbackground-repeatプロパティは、背景画像がどのように繰り返されるかを定義するために使用されます。 構文 CSSbackground-repeatプロパティの構文は次のとおりです- Selector {    background-repeat: /*value*/ } 例 次の例は、CSSのbackground-repeatプロパティ-を示しています。 <!DOCTYPE html> <html> <head> <style> body {    background-image