WEB制作ブログ WEBデザイン、HTMLコーディング、PHP、スマートフォン制作などWEB制作全般に役立つ情報を発信していきます。
投稿日：2015年9月3日 更新日：
今回はCSS3から可能になったbackgroundプロパティでの複数指定をご紹介します。
以前は1要素に指定出来る背景画像は1つでしたので複数の背景画像を使用したい場合には要素を入れ子等にして対応していましたが、CSS3からはカンマ区切りで複数指定が出来る様になったのでhtmlソースの簡略化が可能になりました！
<style>
.demo {
background-image:url(CSS3.png), url(CSS3.png);
background-repeat:no-repeat, no-repeat;
background-position:left top, right bottom;
background-size:50% auto, 200px auto;
}
</style>※非対応プラウザではデモが正常に表示されない場合があります。
この他のCSS3の便利な使い方もご覧下さい。
知ってそうで知らないCSS3の便利な使い方【その3：box系プロパティ】
関連記事
【スタイル次第で変幻自在！】巷で話題のSVG3つのポイントご紹介
「SVG」というイメージフォーマットをご存知でしょうか？ SVG（Scalable Vector Graphics）とはIllustratorで制作されるような、ベクターデータをWEB上で表示すること …
動画を取り入れたWEBサイト。 大分主流となってきて、見かける頻度も一段と増えました。 動画 ＝ 重い という概念もどこへやら。。 最近のWEB動画はとても軽い。 背景として動画を入れ、飽きさせること …
知ってそうで知らないCSS3の便利な使い方【その1：構造疑似クラス編】
CSS3のセレクタは幾つもありますよね。 今回はその中の構造疑似クラスで、私がよく使う便利な構造疑似クラスをご紹介します。 Contents E:first-child 親要素の最初の子要素であるE要 …
面白い動きや便利な機能をJSで実装！ その5：ちょっと変わったマウスオーバーの応用編
javascript(jquery)でマウスオーバー時に変わった動きを付けたいと思います。 面白い動きや便利な機能をJSで実装！ その4：ちょっと変わったマウスオーバーを実装してみました。の続きになり …
こんにちは。web制作初心者のKです！ さてさて、今日は初心者の私がサイトを制作するうえで、 「サイトリニューアルの判断材料のひとつ」をお話したいと思います！ これは、「BtoC（消費者向け）サイトの …
