CSSの背景設定background:none;の正しい書き方

dacelo css January 30, 2009

長くなりましたんで、先に結論書いておきますね。

結論

CSSで背景をナシにしたいときは、
background : none;
を使う

以下、詳細解説です。

CSSのバックグラウンドプロパティで、背景をオフにしたい場合、次のようないくつかの書き方があります。

background-image : url(none);
background-image : none;
background-image : url();
background : url(none);
background : none;
background : url();

W3CのCSSValidatorに通すと、どれもエラーはありません。つまり、CSSの文法的にはどれも正しい。

じゃあどれでもいいじゃん、という話になりそうですが、しかし、サーバーのログを見てみると、この中のいくつかはnoneというファイルを実際にサーバーに要求してしまい、404エラーが出ていることが分かりました。以下、検証結果です。

検証に使ったファイル

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style type="text/css">
<!--
.example {
	background: url(none);
}
-->
</style>
</head>
 
<body>
<p class="example">TEST</p>
 
</body>
</html>

404エラーが出るもの

.example  {
background-image : url(none);
}

アクセスログ

212.123.456.789 – – [30/Jan/2009:10:00:15 +0900] “GET /test.html HTTP/1.1” 200 411
212.123.456.789 – – [30/Jan/2009:10:00:15 +0900] “GET /none HTTP/1.1” 404 281

エラーログ

[Fri Jan 30 10:00:15 2009] [error] [client 212.123.456.789] File does not exist: /home/dacelo/html/none, referer: http://example.com/test.html

.example  {
background : url(none);
}

アクセスログ

212.123.456.789 – – [30/Jan/2009:09:58:55 +0900] “GET /test.html HTTP/1.1” 200 404
212.123.456.789 – – [30/Jan/2009:09:58:55 +0900] “GET /none HTTP/1.1” 404 281

エラーログ

[Fri Jan 30 09:58:55 2009] [error] [client 212.123.456.789] File does not exist: /home/dacelo/html/none, referer: http://example.com/test.html

この2つはいずれも、url(none)で、実際にnoneというファイルをリクエストしてしまい、結果として404エラーが返ってきていることが分かりました。

404ではないが不要なリクエストがあるもの

.example {
background : url();
}

アクセスログ

212.123.456.789 – – [30/Jan/2009:10:03:41 +0900] “GET /test.html HTTP/1.1” 200 401
212.123.456.789 – – [30/Jan/2009:10:03:41 +0900] “GET /test.html HTTP/1.1” 200 401

これは、a href=””と書いたとき等と同じように、そのファイル自体のリクエストと見なされています。背景色にhtmlファイルの指定は無効なので無視されるため、結果として何も表示されなくなりますが、無駄なトラフィックが生じています。
background-image : url();
の場合も同様です。