background-repeat | 実例 CSS プロパティ・セレクタ (5)

background-repeat | 実例 DEMO CSS プロパティ・セレクタ (5) | 書き方

2018-06-08 css-demo

background-repeat サンプルプログラムコードページ

情報：

<!DOCTYPE html>
<html>
<head>
<title>CSS background-repeat  Example</title>
  <style>
#webref1 {
    border: 2px solid black;
    padding: 25px;
    background: url("/img/webref.png");
    background-repeat: repeat;
}
#webref2 {
    border: 2px solid black;
    padding: 25px;
    background: url("/img/webref.png");
    background-repeat: space;
}
#webref3 {
    border: 1px solid black;
    padding: 25px;
    background: url("/img/webref.png");
    background-repeat: round;
}
  </style>
</head>
<body>
<h1>background-repeat  CSS プロパティ Example</h1>
  
  
  <h2>background-repeat：繰り返し（デフォルト）</h2>
<p>ここで、背景画像は、縦横ともに繰り返される最後の画像が収まらない場合は、クリップされますこれはデフォルトです：</p>
  <div id="webref1"><h3>「background-repeat: repeat;」</h3></div>
  
  
  <h2>背景リピート：スペース</h2>
<p>ここで、背景画像は、できる限りクリッピングすることなく繰り返される最初と最後のイメージは要素のいずれかの側に固定され、空白はイメージ間で均等に分散されます</p>
  <div id="webref2"><h3>「background-repeat: space;」</h3></div>
  
  
  <h2>バックグラウンドリピート：ラウンド</h2>
<p>ここでは、空白を埋めるために、背景画像が繰り返され、盛り上がったり伸びたりします（ギャップなし）</p>
  <div id="webref3"><h3>「background-repeat: round;」</h3>
</div>
  
</body>
</html>

background-repeatサンプル実行結果

：background-repeat ・ background-repeat, コード関連記事

全てリセット

background-repeat | 実例 DEMO CSS プロパティ・セレクタ (5) | 書き方 — background-repeat | 実例 CSS プロパティ・セレクタ (5) – WebRef

2018-06-08css-demo

background-repeat | 実例 DEMO CSS プロパティ・セレクタ (5) | 書き方

background-repeat サンプル プログラム コード ページ

Html

Glossary

PHP

JavaScript

JQuery

CSS

background-repeat サンプルプログラムコードページ