CSSのbackgroundに画像を直接埋め込む方法

通常CSSのbackgroundでは、url関数に画像ファイルのパスを指定して読み込みますが、Data URIスキームを使用して画像そのものを埋め込むことができます。
Data URIスキームそのものは、文字列や画像などのリソースデータをURIで表すことのできる仕組みのことです。

書式はdata:MIME Type,タグで、MIME Typeは画像形式がPNGの場合は「image/png」、タグは画像をBase64に変換した文字列を指定します。

コード例：

CSS

SVGなどXML形式の文字列の場合はURLエンコードした文字列を指定することもできます。
URLエンコードを使用する場合は次のポイントがあります。

  • ※ 最低限"<"、">"、"{"、"}"、"#"の5つをURLエンコードしておく必要がある。
    （"#"のみだとIE9～IE11では表示されなくなってしまう。）
  • ※ タグに含まれるクォーテーションはURLエンコードするか、url関数で使用するクォーテーションとは別のクォーテーションにする必要がある。
    （url関数で使用しているクォーテーションがダブルの場合は、タグに使われるクォーテーションはシングルにする。）
  • ※ url関数には必ずクォーテーションが必要。
    ただし、タグに含まれるクォーテーションとスペースなどの余白をURLエンコードのすることでurl関数のクォーテーションを外すことができる。
  • ※ XML宣言やDoctype宣言、コメントアウトなどはなくても問題ない。
  • ※ svg要素にwidth属性とheight属性が必要。
    （width属性とheight属性がないと高さが100%で表現され、IEとEdgeでは繰り返しが行われなくなる。）

コード例：

CSS