「CSS」背景画像を表示する方法(no-repeat、repeat、repeat-x、repeat-y )

2020年9月21日

操作方法
1.no-repeatで背景画像を繰り返し表示しない
<div style="background-image:url('../img/logo.gif’);background-repeat:no-repeat 4px center;> test 111 </div>

2.repeatで背景画像を縦方向と横方向に繰り返し表示
<div style="background-image:url('../img/logo.gif’);background-repeat:repeat;">test 222 </div>

3.repeat-xで横方向のみ繰り返し表示
<div style="background-image:url('../img/logo.gif’);background-repeat:repeat-x;">test 333</div>

4.repeat-yで背景画像を縦方向のみ繰り返し表示
<div style="background-image:url('../img/logo.gif’);background-repeat:repeat-y;">test 444</div>