Webサイト制作

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

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

背景画像を複数指定したい時があり調べてたところ 順番にcssを指定するところまでは分かったけど書き方がよく分からない・・・ 複数背景の使用はよく使いそうなのでメモ。 基本的には,(カンマ)区切りで続けて書くことができるみたい。 background-positionでtop,right,bottom,leftだけでなく、X,y方向へpxや%で指定できます。 背景画像を複数置いて位置をずらしてあげるとちょっと動きのあるデザインになります。 CSSで背景画像(background)を複数指定する方法

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

背景がベタ塗り一色の場合は background:url(画像のパス),#ccc; と書くといいのですが、グラーデーションの場合はちょっと書き方が違いました。
background:url(画像のパス) ,-moz-linear-gradient(top, #7ac630 0%, #cfe489 0%, #7ac630 100%);
	background:url(画像のパス) ,-webkit-linear-gradient(top, #7ac630 0%,#cfe489 0%,#7ac630 100%);
	background:url(画像のパス) ,linear-gradient(to bottom, #7ac630 0%,#cfe489 0%,#7ac630 100%);
	background-repeat:no-repeat;
	background-position:50%;
background-positionを%指定するといいみたいですね~ このサイトがきれいにまとまってて見やすいです。 CSSで背景にグラデーションと画像を同時に指定する

- Webサイト制作
-

関連記事

簡単な背景画像のパララックス

jquaryをリンクさせる htmlファイルでsection毎に背景画像を設定 cssにて。 width:100%; background:url()center center no-repeat f ...

Amazon Product Advertising APIを使って気づいた事

目次1 APIの使い方が分からない時は2 最低価格(MinPrice)、最高価格(MaxPrice)の結果がおかしいと思ったら2.1 価格は*100にします3 一度に取得できる情報の件数4 よく分から ...

jQueryで実装!画像の無限ループスライダー

よくサイトで見かけるイメージ画像がひたすら流れるやつをサイトに実装したいと思い調べたところ、下記のサイトに使いやすそうな無限ループスライダーがあったので実装。 jQueryで無限ループスライダー 目次 ...

display:flexを使った時のIE10のバグに対応する

display:flex;を使った時、IE11では問題なくてもIE10で見ると色々な不具合が生じることが多い。例えば、このサイトのレイアウト。クロームで見るとこんな感じまぁまぁ均等に並んでいるように見 ...

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

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