CSSで背景画像を指定するときはrepeatでなければ必ずno-repeatを付ける

CSSで背景画像を指定する際は繰り返しなしで使用されることが多い。その際にno-repetを指定せずに幅と高さだけを指定して背景画像を表示しているサイトたまに見かける。しかしこれだといくつか問題がある。

繰り返しなしかが一見してわからない

no-repeatが指定されていないと他の人がCSSファイルのコードを見たときに指定されている背景画像が繰り返しなのか繰り返しなしなのかが一見してわからない。

たとえば以下のようにどちらもno-repeatが指定されていないが上段は繰り返し、下段は繰り返しなしとして表示されている。このようなことを防ぐためにも必ずbackgroundを指定する際にはno-repeatまたはrepeatを明示的に指定する必要がある。

Firebugの画像プレビューで繰り返して表示される

FirebugでCSSで指定している背景画像をプレビューするときに画像が繰り返して表示されてしまう。ちなみにChromeの開発ツールでは画像プレビュー時に繰り返すことはない。

firebug_bg_repeat

カテゴリーcss