Polymerのcore-image要素を利用することで、CSSを触らずにbackground-imageを利用できます。

今回は簡単にその使い方を紹介します。

core-image要素を読み込む

まずはcore-imageを利用できるように要素をHTMLにインポートさせます。

[html]
<link href="../../bower_components/core-image/core-image.html" rel="import">
[/html]
「手元にcore-image.htmlがない」という方はPolymer core elements – Polymerからダウンロードしましょう。

core-imageタグを使用する

インポートができればあとはタグを使用するだけ。非常にお手軽です。

[html]
<core-image class="bg-img" src="https://example.com/image.png" sizing="cover"></core-image>
[/html]

これだけでsrcに記述された画像をbackground-imageとして表示してくれます。

更に「sizeing=”cover”」を書き足すことで、「background-size:cover」まで適用するようになっています。

core-imageで知っておくと便利なHTML属性

core-imageで使用できるHTML属性は結構多いのですが、今回は最低限知っておくと便利な属性６つをまとめてみました。

src	default: null	画像のURL
sizing	default: null	background-sizeの値を(cover / contain / null)から指定できます。
position	default: ‘center’	sizingが有効な場合に画像の位置を指定できます。(background-position？)
placeholder	default: null	srcの画像が存在しない場合や読み込み中の場合に表示させるテキスト・画像を指定できます。
width	default: null	CSSのwidthを指定できます。
height	default: null	CSSのheightを指定できます。

この他の属性は→Polymer core elements – Polymer

作業メモ

core-imageを利用して、DBpediaから読み込んだ画像を背景画像的に使ってみました。

DBpediaの画像はサイズがバラバラなことが多いのですが、core-imageを利用することでいい感じにトリミングすることができています。