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

CSSで背景を繰り返す

CSSの背景の繰り返しは、Webページで背景画像を繰り返す方法を設定するために使用されます。これには、background-repeatプロパティを使用します。以下は、プロパティ値にすることができます-

background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit;

例

例を見てみましょう-

<!DOCTYPE html>
<html>
<head>
<style>
body {
   background-image: url("https://www.tutorialspoint.com/images/Swift.png");
   background-repeat: repeat-x;
   background-color: blue;
   color: white;
}
.demo {
   text-decoration: overline underline;
}
</style>
</head>
<body>
<h1>Details</h1>
<p class="demo">Examination Center near ABC College.</p>
<p class="demo2">Exam begins at 9AM.</p>
</body>
</html>

出力

CSSで背景を繰り返す

例

別の例を見てみましょう-

<!DOCTYPE html>
<html>
<head>
<style>
body {
   background-image: url("https://www.tutorialspoint.com/images/Swift.png");
   background-repeat: repeat-y;
   background-color: orange;
   color: white;
}
.demo {
   text-decoration: overline underline;
}
</style>
</head>
<body>
<h1>Details</h1>
<p class="demo">Examination Center near ABC College.</p>
<p class="demo2">Exam begins at 9AM.</p>
</body>
</html>

出力

CSSで背景を繰り返す


  1. CSSの背景プロパティ

    CSSの背景プロパティは、要素の背景のスタイルを設定するのに役立ちます。 CSSのbackgroundプロパティは、要素の背景を指定するための省略形です。 background-color、background-image、background-repeat、background-position、background-clip、background-size、background-origin、background-attachmentが一緒になって、CSSの背景プロパティを構成します。 構文 CSSバックグラウンドプロパティの構文は次のとおりです- Selector {   &

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

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