Background of Ribbon

リボン背景の使い方

スタイルシートに背景・高さなどを設定し使用します。Bootstrapと一緒に使うと効果的です。
ヘッター高さ150px以内、フッター高さ140px以内で利用できます。
ヘッダーでの設定・・・background: url(背景画像) repeat bottom;
フッターでの設定・・・background: url(背景画像) repeat top;

←Bootstrapにはこんなボタンも標準でついてるので便利♪

画像について・・・画像の名前にtとwがありますが、少し処理方法が違います。マットな感じが主流ですが、こんな質感が好きです。

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil consequuntur, nesciunt dicta, esse rem ducimus itaque quis. Adipisci ullam nam qui illum debitis sit ad in delectus, repudiandae non dolorum! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit veritatis, facere aliquid itaque tempore consequatur nihil sint enim aliquam id saepe magnam totam repellat placeat a fugit nulla molestias voluptas.

#1 background: url(images/sea_w2.png) repeat bottom;

#2 background: url(images/gray_t8.png) repeat bottom;

#3 background: url(images/brawn_w8.png) repeat bottom;

#4 background: url(images/orange_w2.png) repeat bottom;

#5 background: url(images/peach_w4.png) repeat bottom;

#6 background: url(images/red_w1.png) repeat bottom;

#7 background: url(images/peach_w1.png) repeat bottom;

#8 background: url(images/red_t3.png) repeat bottom;

#9 background: url(images/purple_w3.png) repeat bottom;

#10 background: url(images/purple_t3.png) repeat bottom;

#11 background: url(images/blue_w1.png) repeat bottom;

#12 background: url(images/green_w6.png) repeat bottom;