plateicon.gif

divの入れ子で作成しています。

外側のdivに動くハートとフレームを背景画像として指定しています。

テキスト部分を分かりやすくするために内側のdivには薄いブルーの背景色を指定しています。

CSS

.frame_out { margin: 0 auto; padding: 0; width: 555px; height: 555px; position: relative; background-image: url(frame_lace_white.png),url(heart_gray.gif); background-repeat:no-repeat,repeat; } .frame_text { margin: 0 auto; padding: 0; width: 300px; height: 300px; text-align: left; position: absolute; top: 127px; left: 127px; background-color: rgba(85,217,245,0.2); } img { display: block; margin: 0 auto; }

HTML

<div class="frame_out"> <div class="frame_text"> <img src="***.gif" width="" height="" alt=""> <p>ここに文章</p> </div> </div>
plateicon.gif

tableの入れ子で作成しています。

外側のテーブルの背景画像に動くハート、内側のテーブルの背景画像にフレームを指定しています。内側には余白も指定。

ソースはご自由にお使いください。間違いがありましたら修正してください。

CSS

table { margin: 0 auto; width: 555px; height: 555px; padding: 0; border-collapse: collapse; } .table_out { margin: 0 auto; padding: 0; background-image: url(heart_gray.gif); } .table_in { margin: 0 auto; padding: 127px; text-align: left; vertical-align: top; background-image: url(frame_lace_white.png); } img { display: block; margin: 0 auto; }

HTML

<table> <tr> <td class="table_out"> <table> <tr> <td class="table_in"> <img src="***.gif" width="" height="" alt=""> <p>ここに文章</p> </td> </tr> </table> </td> </tr> </table>