bootstrapのコーディングでcontainerからはみ出す場合

Question

↑のようなデザインをbootstrapでコーディングしているのですが、

<div class="container">
  <div class="col-sm-12 col-lg-12">
    <span class="hoge">理由は簡単</span>
  </div>

<div>

となっている場合、背景のお札の部分やその上にくるリボンなどの部分はどうやってコーディングするのがスマートでしょうか？

・お札の背景だけを画像で保存（background.png）
・リボンや100万円保証つき、推定獲得金額～一切問題ありません。までをpngで保存（image1.png）

して、

お札の背景などはcontainerからはみ出さなくてはいけないので

一度containerを閉じて、

<div style="width:100%;">
<img src="image1.png" />
</div>

のような形にするとお札背景からimage1ははみ出なくなっていまいますし、
どのようにすればよいかわかりません。

ネガティブマージンなどを当てるにも、レスポンシブデザインなのでピクセル指定するわけにもいかず困っています。

わかりづらい質問で申し訳ございませんがご教示頂ければ幸いです。

Comments

[kei344]

画像はteratailでも添付可能ですので、そちらでお願いします。

[falcon0321]

ご指摘ありがとうございます！修正させて頂きました！

Answer 1

初めまして。
bootstrapの3.3.7 ですが、以下のようにしてはどうでしょうか？
styleはインラインで書いてあります。

        <!-- お札背景 -->
        <div style="background:url(bg_money.png) center no-repeat; background-size: auto;">
            <div class="container">
                <div class="row">
                    <!-- 理由は簡単 -->
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <div><img  style="margin: auto;" class="img-responsive" src="./moji.png"></div>
                    </div>        
                </div>
            </div>
        </div>