HTMLで画像の背景に枠線を付ける方法

初めまして。
最近HTML/CSSを学び始めたものです。

中々検索では良い方法が見付からなかったので質問させて頂きました。

添付画像の様な枠線を作りたいのですが、CSSで可能でしょうか？
出来なければPhotoshopで画像と枠線を合体させたものを作り、
その中の空白に本文を入力していこうと思うので、
出来なくとも問題はありません。

もし、cssで出来る方法があればご教授頂けないでしょうか？

質問者からの補足コメント

• どの枠線の事を指しているかわかりづらかったので補足しました。

  
    補足日時：2017/03/18 14:13

• イメージとしては枠線置いて左上の部分に花の画像を置くって感じですね。
  すみません、花も文字もhtmlのコンテンツであれば、というのが良く分からないのですが
  <img src>で花の画像を載せた場合、htmlのコンテンツではなくなりますか？

  No.1の回答に寄せられた補足コメントです。 補足日時：2017/03/18 14:19

No.2 ベストアンサー 回答者： t_fumiaki 回答日時： 2017/03/18 14:31

花が画像なら出来ます。

下は例題なので、微調整して下さい。

CSS部分
.
waku {border:1px solid; margin-top:-30px;}
(-30pxで上のコンテンツ内に境界(枠線)が侵入します）

html部分

　　<img src="・・・・" />
先頭に全角ブランクを数個入れて右にずらす。cssでやっても可能。

<div class="waku">
<br />
<br />
<p>本文</p>
・
・
・
</div>

枠が上へ侵入するので、その分<br />で文字コンテンツを下げて置く。

この回答へのお礼

教えて頂いた記述で出来ました！
ありがとうございます！

お礼日時：2017/03/18 15:06

No.3 回答者： t_fumiaki 回答日時： 2017/03/18 14:33

あっ！ずれてしまった。

.
waku・・・・

は
.waku・・・・

です。

No.1 回答者： t_fumiaki 回答日時： 2017/03/18 14:02

枠線ってどの部分？

花の画像にも、後から枠線つけたいのならcssでは無理。

花も文字もhtmlのコンテンツであれば、cssでも可能。