CoComina– Web design and Programing –

あまり使う機会は無いかもしれませんが、imgタグに設定された画像パスをそのimgタグの親要素の背景画像にするスクリプトのご紹介。

どんな時に使うのそれ？って感じですが、実際にクライアントのホームページを作成している時に画像サイズがバラバラで変な余白がでたりする。とりあえず見た目を整えておこう！ そんな時に使います。

小ネタとしてどうぞ。

<div>

	<p class="parent"><img src="example.jpg" alt=""></p>

</div>

var src = ''; // 変数初期化

$('.parent').each(function(){

	src = $('img', this).attr('src'); // 画像パスを取得

	$(this).css({'background-image':'url(' + src + ')'}); // 親要素 .parentの背景画像に設定
});

画像が複数ある場合に備えてeachでループ処理させてます。

あとは、.parentの背景画像をCSSでリピートさせたり、background:cover;にしたりとお好みでどうぞ。