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

In: css

30 1月 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();
の場合も同様です。

エラーが出ないもの

.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;
を使う

コメント

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

トラックバックURL:

Avatar

Sven

9月 24th, 2009 at 4:53 PM

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

Avatar

zgldh

1月 2nd, 2010 at 5:08 PM

感谢,我找到问题所在了

Avatar

オージャ浅倉

12月 20th, 2012 at 2:21 PM

Avatar

ohjaasakura

12月 20th, 2012 at 11:21 PM

Avatar

エラーログにnone, refererが出る。 | Moral Hazard!!

3月 12th, 2013 at 7:35 PM

[…] としないとサーバーが404エラーを返してしまう。 こちらに詳しい事が書いてあります。素敵。 何がダメって、Dreamweaverで背景無しを指定しようとcssスタイルをいじくったら、平気で上の […]

Avatar

suginoy

1月 28th, 2015 at 7:18 PM

“backgroundでもbackground-imageでもどちらでも良いが、url(none)にすると404エラーになる。”

Comment Form

About this blog

ここは、SE見習いである私ことdaceloが、日夜習得していくシステム関連の備忘録、phpやWordPressTipsのネタ、あるいはSEOやWebマーケティング関連の雑感を投稿するブログです。 平日は大体毎日投稿しています。土日は休業日です。

カテゴリー

カテゴリー

アーカイブ