マーカーネット株式会社

WEB制作ブログ WEBデザイン、HTMLコーディング、PHP、スマートフォン制作などWEB制作全般に役立つ情報を発信していきます。

CSS WEB制作

知ってそうで知らないCSS3の便利な使い方【その4:複数背景指定】

投稿日: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系プロパティ】

知ってそうで知らないCSS3の便利な使い方【その2:属性セレクタ編】

知ってそうで知らないCSS3の便利な使い方【その1:構造疑似クラス編】

東京のWEB制作会社 マーカーネット株式会社 公式WEBサイトへ

-CSS, WEB制作

執筆者:

関連記事

【グラフィック V.S. Webデザイン】グラフィック制作とWeb制作の違い-3-

約3週間に1回の登場になりますが、デザイナーのOです。 前回に続けて、Webとグラフィック制作との違いについて、続いて紹介していきたいと思います。 今回は最終回となりますので、最後まで読んでいただけれ …

リンク切れを自動的にチェックしてくれるワードプレスのプラグイン

リンク切れを自動的にチェックしてくれるワードプレスのプラグイン

リンクチェックしていますか? マニュアルでチェックするとたいへんですよね。 WordPressには自動で定期的にリンク切れをチェックしてくれる 便利なプラグインがございます。 その名もズバリ、「Bro …

レスポンシブにも対応!③ フリックスライダーを作成してみました。

レスポンシブにも対応!③ フリックスライダーを作成してみました。

今回はレスポンシブに対応できるスライドショーを作成してみたいと思います。 ただ、レスポンシブに対応しているだけでなく、 スマホに便利なフリックも可能なものをご紹介致します。 前回までの関連記事です。 …

夏にピッタリ!打ち上げ花火をテーマにしたブラシ素材をご紹介。

夏にピッタリ!打ち上げ花火をテーマにしたブラシ素材をご紹介。 http://www.markernet.co.jp/blog/2015/08/19/post-6004/ Facebook

Laravel SocialiteでGitHubを利用した認証

Contents1 Lravel SocialiteでGitHubを利用したOAuthによる認証の手順を紹介します。1.1 1. GithubでOAuthアプリケーションを作成1.2 2. Larav …