CSSの背景設定background:none;の正しい書き方
長くなりましたんで、先に結論書いておきますね。
結論
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
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
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
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();
の場合も同様です。
エラーが出ないもの
.example { background-image : none; } |
アクセスログ
212.123.456.789 – – [30/Jan/2009:10:01:01 +0900] “GET /test.html HTTP/1.1” 200 406
.example { background : none; } |
アクセスログ
212.123.456.789 – – [30/Jan/2009:10:01:53 +0900] “GET /test.html HTTP/1.1” 200 400
この2つはどちらも問題ありませんでした。
まとめ
backgroundでもbackground-imageでもどちらでも良いが、url(none)にすると404エラーになる。
結論
CSSで背景をなしにしたいときは、
background : none;
を使う
Hi,
I’m from Germany and can’t read any of this “mystic” characters, but I got the right hint to prevent hundrets of “GET /none HTTP/1.1” 404 Errors in my Webserver Logs..
Thanks 🙂
best wishes
Sven
感谢，我找到问题所在了
http://t.co/XJz0dMoz こういう落とし穴があったりするから困る。「背景無し」をDWで指定するとデフォルトでは「background : url(none);」と記述されるので注意が要る。
まだ私には勉強が必要です。
“backgroundでもbackground-imageでもどちらでも良いが、url(none)にすると404エラーになる。”
◇クッキー多数。◇参考