サイト制作メモ

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

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

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

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

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

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

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

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

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

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

- サイト制作メモ
-

関連記事

tableのwidth幅指定のメモ

サイト制作している時、 時々テーブルを使うけどIEやfirefoxでwidth指定がきかなかったので対応のメモ。 thやtdに対して幅を指定する場合 Chromeならcalc();が使えるけど、IEで …

no image

サイト制作に役立つTips_リンク集

角丸とシャドウのジェネレーター グラデーションジェネレーター css矢印ジェネレーター flexboxの使い方 【CSS】実はこんなに便利!cssのセレクタ指定方法をちょっとだけ掘り起こしてみた 【保 …

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

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

WordPress と Facebookの連携が表示されない原因

dddwordpressのテーマ「xeory_extension」を使っていた時 初期設定でいくつかの項目を入力するとfacebookとの連携ができるようになってたのでテストサイトで設定項目を入力する …

cssでlistのborderを斜め線にする

このサイトのメニューでも使ってますが、やってみたかったけどなかなか方法が見つけられなかったリストの区切り(border)を直線でなく斜め線にする方法。 まずはHTMLでメニュー作成 普通にリストで作成 …

翻訳する