imgタグとＣＳＳでのbackground-image:urlとの違い

Posted on 2009年10月16日 by vanillate

「画像」なのか、「背景」なのか、それが問題だ。

ＨＴＭＬでは文章の基本構造を基に書き、ＣＳＳではデザインを指示することがいまやスタンダードとなっています。これは、ＨＴＭＬ構造を簡単にして、いままであったテーブルでの段組が減り、読みやすくすし、そしてデザインの幅を持たせ、統一することができる、といった恩恵をうけました。
しかしながら、いままで管理するメインファイルが１枚のhtmlだったのに対して、１枚のhtml＋ＣＳＳファイル（１枚＋α）となり、初心者の勉強のハードルがあがっていると聞いて、今回は画像の読み込みをメインに書いてみようと思います。

よく見かける画像の読み込み方法

・ＨＴＭＬ通常の記述　

<img src=”画像ファイルまでのパス” />

・CSSでの読み込み（ＣＳＳファイル内）

background-image:url(“画像ファイルまでのパス”);

・CSSでの読み込み（ＣＳＳファイル内）

background:url(“画像ファイルまでのパス”);

・CSSでの読み込み（htmlタグ内に直接ＣＳＳ指定）

<style type=”text/css”>
#id_name { background:url(“画像ファイルまでのパス”); }
</style>

・CSSでの読み込み　ＨＴＭＬタグにstyle属性で指定

<div style=”background:url(画像ファイルまでのパス);”></div>

・これらの画像の上に載せたりする記述（ＣＳＳ）position,z-indexなど

ざっくりとこれくらい方法があります。

できるだけstyleタグや、style属性で書くのはおすすめしません。でもかけます。（わたしも時々使います。）本当は、すべてＣＳＳファイルのなかで管理すべき部分なので、本当にイレギュラーな場合のみ、利用することをおすすめします。これが中毒になると、ＨＴＭＬがすごいことになりますので、ご注意を。

background-imageとbackgroundの違いですが、指定の記述が違うだけで、同じことをやっていると思ってもらっていいです。background-imageの場合は、画像ファイルまでのパスを指定することしかできませんが、backgroundの場合は、背景画像関連のすべての指定を一括で行えます。たとえば、

background-image:url(画像ファイルまでのパス);
（画像の指定のみ）
background:url(画像ファイルまでのパス) top left repeat-x;
（画像指定＋縦位置設定＋横位置設定＋Ｘ方向に繰り返す指定）

上記のような記述となります。

※ＣＳＳの上書きについてですが、background-image:url();で上部で指示している場合は、同じようにbackground-
image:url();で上書きをしなくてはうまく動かない場合があります。一括指定の場合は、一括指定で相殺するのがよいかと思います。

One Response to imgタグとＣＳＳでのbackground-image:urlとの違い