投稿日：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系プロパティ】
関連記事
こんにちは、デザイナーのAです。 今回は商用利用OKな無料フォントをご紹介します！ 無料フォントとして紹介されているフォントでも、中には商用利用は不可とされているものもありますので、ライセンスをしっか …
こんにちは、デザイナーのAです。 今回は商用利用OKな日本語の無料フォントをご紹介します！この記事は2021年6月現在の内容になります。 目次1 黒薔薇ゴシック2 g_コミック古印体-教漢版3 数式フ …
こんにちは！ デザイナーの木野子です。 マーカーネットブログを、今回初めての担当することになりました！ ここでは、私が普段web製作で使っている、 PhotoshopやIllustratorの小ネタな …
【グラフィック V.S. Webデザイン】グラフィック制作とWeb制作の違い-1-
こんばんは、デザイナーのOです。 実は私はグラフィックデザイナー出身で、約1年半前にWeb業界に入りました。 Webについてまだまだ勉強中の自分ですが、 実際にWeb制作に携わって感じた、グラフィック …
【2024年最新版】ホームページのリニューアル制作で利用できる補助金は？申請の注意点などについても解説
ホームページのリニューアルは、ビジネスの成長に不可欠ですが、費用面で課題を感じる企業も多いと思います。そこで注目したいのが、制作費用の一部をカバーできる補助金制度です。本記事では、ホームページリニュー …
2024/11/15
Webアクセシビリティってそもそもなんだっけ？ 誰もがWebの恩恵に触れられる社会へ
2024/10/30
ホームページ制作にSEO対策は重要！集客で困らないためのポイントを徹底解説
2024/10/30
ホームページ制作の流れを徹底解説！制作の注意点や外注する際のポイントもご紹介
CONTACT US
