背景画像を複数指定したい時があり調べてたところ
順番にcssを指定するところまでは分かったけど書き方がよく分からない・・・
複数背景の使用はよく使いそうなのでメモ。
基本的には,(カンマ)区切りで続けて書くことができるみたい。
background-positionでtop,right,bottom,leftだけでなく、X,y方向へpxや%で指定できます。
背景画像を複数置いて位置をずらしてあげるとちょっと動きのあるデザインになります。
背景にグラーデーションと画像を指定したい時
背景がベタ塗り一色の場合は
background:url(画像のパス),#ccc;
と書くといいのですが、グラーデーションの場合はちょっと書き方が違いました。
|
1 2 3 4 5 |
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で背景にグラデーションと画像を同時に指定する
