INFORMATION

こちらに説明などどうでしょうか。例によって上のメニューページだけ表示させた方が可愛いと思います。
携帯用とPC用を想定したタグを入れているので画像のURLを二箇所入れる必要があります。たぶんHEADをみればわかると思います。テーブル幅を変更するとメニューがずれてしまうので（すみません）変更する場合はCSS内のメニューも一緒にいじってあげると良い位置に収まるかと思います。付箋ですリンクテスト
素材はパブリックドメインをお借りしたので↓からどうぞ

HEAD

* {
 margin:0 auto;
 padding:0 auto;
}

body {
 font-size: 12px;
 font-family:'Lucida Grande',
 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',
  Meiryo, メイリオ, sans-serif;
 line-height: 1.8em;
}

.all {
 text-align: left;
 padding: 6% 10px 0px 10px;  
}

.header {
 margin:0 auto;
 padding:0 auto;
 width:90%; 
}

.photobox{
 width:100%; 
 height:300px;
 background: url(#画像#);
 background-position:center top;
 background-repeat:no-repeat;
-moz-background-size:contain;
 background-size:contain; 
 no-repeat;position:relative;
}

.photobox p{ 
 width:200px;
 position:absolute; 
 top:35%;
 left:70px;
 font-size:10px;
 line-height: 2.6em;
}

.photobox p2{ 
 width:200px;
 position:absolute; 
 bottom:30px;
 left:70px;
 font-size:10px;
 line-height: 1.0em;
}

a {
 text-decoration: none;
}

a:hover { 
 color:#707070;
 border-bottom: 1px solid #000000;
}

a.menu {
 text-decoration: none;
 color:#ffffff;
 background-color: #000000;
 padding:4px 10px 4px 10px;
}

a.menu:hover { 
 color:#000000;
 background-color: #ffffff;
 border: 1px solid #000000;
 padding:4px 10px 4px 10px;
}

h1{
 color:#000000;
 margin-bottom:10px;
 padding:4px 10px 2px 0px;
 font-size:15px;
}

.midasi { 
 background-color: #000000;
 padding: 3px 10px 3px 30px;  
 color: #ffffff;
}

.ma { 
 color: #000000;
 padding: 0px 2px 0px 2px; 
 background: linear-gradient(transparent 40%, yellow 0%);
}

@media screen and (min-width: 600px) {.all {  width:600px;}}

@media screen and (max-width: 400px) {
.all { 
 width:auto;
 letter-spacing: -0.001em;
 padding: 10% 10px 0px 10px;
 text-align: justify;
 text-justify: inter-ideograph;
}

.photobox{
 width:100%; 
 height:200px;
 background: url(#画像#);
 background-position:center top;
 background-repeat:no-repeat;
-moz-background-size:contain;
 background-size:contain; 
 no-repeat;position:relative;
}

.photobox p{ 
 width:100px;
 position:absolute; 
 top:15%;
 left:10px;
 font-size:10px;
 line-height: 2.4em;
}

.photobox p2{ 
 width:200px;
 position:absolute; 
 bottom:20px;
 left:15px;
 font-size:10px;
 line-height: 1.0em;
}}

</style>

BODY

素材です(未透過原寸大(テンプレートではブラウザ幅に合わせて可変するようにしています)↓