サイト制作メモ

背景画像を複数指定する方法(css)

投稿日:2017年5月10日 更新日:

背景画像を複数指定したい時があり調べてたところ
順番にcssを指定するところまでは分かったけど書き方がよく分からない・・・

複数背景の使用はよく使いそうなのでメモ。
基本的には,(カンマ)区切りで続けて書くことができるみたい。

background-positionでtop,right,bottom,leftだけでなく、X,y方向へpxや%で指定できます。
背景画像を複数置いて位置をずらしてあげるとちょっと動きのあるデザインになります。

CSSで背景画像(background)を複数指定する方法

背景にグラーデーションと画像を指定したい時

背景がベタ塗り一色の場合は
background:url(画像のパス),#ccc;
と書くといいのですが、グラーデーションの場合はちょっと書き方が違いました。

background-positionを%指定するといいみたいですね~

このサイトがきれいにまとまってて見やすいです。
CSSで背景にグラデーションと画像を同時に指定する

-サイト制作メモ
-

関連記事

パーマリンクの設定

stinger8のダウンロードサイトにはパーマリンク設定を”postname”にしているとあったのでそのように設定してみた。 で、実際に新規で記事を追加すると 記事のタイトルが …

mmenuは初心者でも簡単に使えるjQuery plugin|スマホ用メニュー

スマホ用メニューを作成する時によく使っているのがjQuery pluginのmmenu あまりjQuery詳しくない私でも簡単に使えるところが気に入ってます。 オプションで色々設定もできるみたいなので …

動画や連続写真からのアニメーションgifの作成

アドビのサイトにとっても分かりやすく説明されていたアニメーションgifの作り方。 連続写真や動画から簡単に作成できます。 アニメーションgifの作成方法 動画の再生やアニメーションgifのサンプル作成 …

IE10で要素がはみ出してしまう時の対処法

なぜかIEだけ特定の要素がはみ出てしまうことはありませんか? 私はよくあります。 ページ作成をしていてブラウザチェックをしているとよくぶち当たるこの問題。 何度か解決してるけど、しばらくしたら忘れてし …

webサイト制作時に役立つ!メインカラーを元にカラーを選べるサイト

web制作する時にカラーの組み合わせを調べたい時、色々なジェネレーターはあるけど たとえば メインカラーがすでに決まっていて それに合うカラーが知りたい時 ってないですか? 私は結構あります。 で、ジ …