テキストを飛ばして背景画像を置きたいときは多々ある。
ロゴ周りとか、デザインされたテキスト部分とか。

responsiveに対応するにはどうすればいいんだろーって分からなくて、
今までは諦めて画像を直接配置してwidth:100%,height:auto;でやっておりました。

でも考えてみたら、比率を変えないんだから以下のように対応できますよね。
例）
画像のサイズが600px × 400pxだとしたら

div.logo{
text-indext系;好み分かれるので詳細書かず
background:url(xxx) no-repeat center top;
back-ground:cover;
max-width:600px;
padding-top:66.66666666%;  /* 400px/600px = 0.66666666… */
}

こんな感じでいけちゃうっぽいです。