CSSによりblockquote周辺に画像を表示させる方法

スタイルシートを使ってblockquoteの周囲に画像を表示させてみました。
現在このブログで使っているblockquoteは以下のように設定されています。
blockquote {
    border: 1px solid #000;
    padding: 5px;
    margin: 10px;
    background-color: #FFFFCC;
}

上がまさに<blockquote></blockquote>を使って表示させたものです。
以前紹介した「CSSでリンクの拡張子に合わせてリンクの横にアイコンを表示させる方法」を参考にblockquoteの左上に画像を表示させてみました。

  • html

    • ue

    <blockquote>
    blockquoteの左上に蝙蝠を表示させる
    </blockquote>

    sita

  • css

    • blockquote {
        border: 1px solid #000;
        background: url(画像URL) no-repeat top left;
        padding-top: 30px;
        padding-left: 30px;
        padding-bottom: 10px;
    }

  • 結果



※paddingの値は画像のサイズや指定したい幅に合わせて変える必要があります。
関連記事