マーカーネット株式会社

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:構造疑似クラス編】

-CSS, WEB制作

執筆者:

関連記事

動物や人物の写真を一瞬で切り抜き?!すごすぎる無料ツール「remove.bg」

こんにちは、デザイナーのAです。 今回は人物や動物が映った写真の背景だけを一瞬で切り抜いてくれる無料ツール「remove.bg」をご紹介します。 ※6月のアップデートデートでかなり対象の幅が広がったよ …

【2014年総まとめ】今年一番多く使ったWEBフォント

【2014年総まとめ】今年一番多く使ったWEBフォント

こんばんわ~WEBデザイナーのHです。 本日はこの1年間、実際のWEBデザイン制作を通して、一番多く使ったWEBフォント、トップ3をご紹介します。 中には有料のものもありますが、社内で共有することを優 …

ウェブデザインの幅が広がるFREEフォントの紹介

ウェブデザイン作りに当たって、フォントの選択はすごく大事なところであり難しい問題です。 普段、使うフォントってもう決まっていたりしませんか? 私の場合、欧文はHELVETICA,Futuraを和文はモ …

WEBトレンド+αの作り込みで、心地よさが広がる素敵サイトをご紹介! ~素敵サイトの旅 その1~

WEBトレンド+αの作り込みで、心地よさが広がる素敵サイトをご紹介! ~素敵サイトの旅 その1~

こんにちは!風邪っぴきのweb初心者Kです。 週末に風邪を治しきれず、咳のため未だマスクが手放せません。 今日は誰とも口をきけないかも知れない!!! みなさまはお風邪など召されていませんか? さてさて …

データベース(MySQL)の日付操作について

データベース(MySQL)で普段よく使いますが、 なかなか覚えられない、日付の操作のSQLについて書きます。 以下のようなニュースのテーブルが存在します。 CREATE TABLE IF NOT EX …