特定のボックスの端(右下など)にロゴ画像を常に固定して表示したいケースがあります。ただ1つのボックスに特定のロゴ画像を表示したいこともあれば、複数のボックスに同じロゴ画像を掲載したい場合もあるでしょう。
スタイルシートを使えば、ボックスの右下など任意の場所にロゴ画像を固定表示することも簡単に実現できます。

ここでは、こんなロゴ画像「」をサンプルとして用意しました。もっとセンスの良いロゴが用意できれば例として良かったとは思いますが……。(^_^;;; まあ、脳内で見栄えの良いロゴに置き換えて解釈して下さい。^^;

さて、各ボックスの右下にロゴを固定表示させた例は、以下のような感じです。点線で囲まれた黄色いボックス内に文章が掲載されていますが、その右下に先程のロゴ画像が表示されているはずです。

上記のようにボックスにロゴ画像を付加するスタイルを作るのはとても簡単です。
「右下」に配置するロゴ画像は、単に「ボックスの背景画像」として表示しているだけです。ただ、

• 背景画像の繰り返しをなくす(＝1回だけ表示)
• 背景画像の表示位置を「右下」に固定する

……という指定を加えているだけです。

具体的には、以下のようにCSSソースを記述します。(class名「sample」を指定したp要素が適用対象の場合)

p.sample {
   background-image: url("DarkYellowLogo.gif"); /* ロゴURL */
   background-repeat: no-repeat;                /* 1回だけ表示 */
   background-position: bottom right;           /* 右下に表示 */
   background-color: #ffffcc;                   /* 背景色 */
   padding: 0.3em;                              /* 内側の余白 */
   border: 1px dotted gray;                     /* 枠線 */
}

必要なのは、2～4行目だけです。

• 2行目：
  まずは、背景画像を指定するbackground-imageプロパティの値にロゴ画像のURLを指定します。(これだけだと、ロゴ画像がボックスの背景全面にタイル状に並んで表示されてしまいます。)
• 3行目：
  背景画像の繰り返し方法を指定するbackground-repeatプロパティに値「no-repeat」を指定すると、背景画像が1回だけ表示されるようになります。(描画領域が余っていても上下左右にタイル状には並ばなくなります。)
• 4行目：
  背景画像の掲載位置を指定するbackground-positionプロパティに値「bottom right」を指定すると、背景画像は右下に表示されます。ここで指定する値「bottom」と「right」の間には半角スペースがあり、値を2つ指定しています。なお、ここを「top right」にすれば、ボックスの右上に固定表示できます。

5行目以降はサンプル用の装飾であって特に必須ではありません。
background-colorプロパティはボックスに背景色を加えているだけ、paddingプロパティは内側の余白を設けているだけ、borderプロパティは枠線(ここでは1pxで灰色の点線)を引いているだけです。

というわけで、ロゴ画像さえうまく作れば、おもしろい装飾になるんではないかと思います。(^_^;;;

(更新日：2016年02月15日)