投稿日：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系プロパティ】
関連記事
【世界一カンタン？！】１枚の画像だけでロールオーバーをさせる方法
画像のロールオーバーって面倒ですよね。 ２枚の画像を用意してJavascriptで制御して、、や背景画像していしてh overで、、 というのが一般的ですが、 今回は画像１枚だけ。CSSに４行記載する …
WEBデザイナーが仕事を依頼されたとき、まず最初に聞いておくべき7つの事。
こんばんわ。WEBデザイナーのKです。 本日は、WEBデザイナーがWEBディレクターから案件を依頼された時に、 必ず聞いておくべきことをまとめてみました。 ざっくりなので、細かく分けるとまだまだ沢山あ …
なるべく早く作ってほしい！！ 今週末までに提出お願い！！ ･･････ヤバイ、時間がない。 こんな急ぎの依頼が来たときに、デザイナーさんの手助けをしてくれる素材サイト。 今回は、特定のジャンルに特化し …
リンク切れを自動的にチェックしてくれるワードプレスのプラグイン
リンクチェックしていますか? マニュアルでチェックするとたいへんですよね。 WordPressには自動で定期的にリンク切れをチェックしてくれる 便利なプラグインがございます。 その名もズバリ、「Bro …
ワードプレス導入時に入れておくと便利なプラグイン(セキュリティ編)
ワードプレスはオープンソースのため、そのソースコードが公開されております。 誰でも無償で、誰でも改変して商用利用も可能であるというメリットもございますが、 デメリットとして悪意のある者から不正侵入を許 …
2024/09/11
WEBサイトリニューアルは目的が重要！失敗しないためのやり方や費用面について解説
2024/09/11
ホームページの保守とは何をすべき？作業内容やかかる費用などをまとめて解説！
2024/09/09
2024/09/09
【最新版】WEBデザインのトレンド20選！厳選したモダンなデザインを一挙公開！
CONTACT US
