レスポンシブデザインにおいて画像の配置というのは、
単に写真を配置するだけなら、width:50%のように写真に幅を指定してやれば画面幅に従って画像が拡大縮小されるので簡単です。
もちろん高さも画像の縦横比を損なうことなく自動でリサイズされます。
ですが、背景に画像を含むdivのようなブロック要素などは縦幅は自動で調整されません。
どういうことかというと、
こんな風になります。

これをレスポンシブ対応として、高さも自動的にうまく調整されるようにしてみましょう。
知らない人も多いかもですが、思ったほど難しくはないのでぜひ覚えておきましょう。

コードは単純に、背景に画像を指定したdiv要素にwidthを%指定して、高さを固定値で指定しています。

<div class="block_bg"></div>

.block_bg{
  background: url('http://www.y-com.info/contents/wp-content/uploads/2016/12/OAV9EA0.jpg') center;
  background-size: cover;
  width: 50%;
  height: 280px;
}

高さが固定値なので、このような動きになるのは当たり前なのですが、
この高さをautoにしたって画像は背景に入っているんだし、背景画像のサイズを考慮してくれるわけではない。
かといって、heightに%指定をしてもダメです。
どうするか、

ということを利用します。
なんてことはないです、heightの指定をなくしてpadding-topを入れてやるだけ。

.block_bg{
  background: url('http://www.y-com.info/contents/wp-content/uploads/2016/12/OAV9EA0.jpg') center;
  background-size: cover;
  width: 35%;
  padding-top: 20%;
}

heightはなくなったけれど、paddingで高さが自動調整されます。

超簡単ですな。

レスポンシブデザインの経験が無い人は結構ここでひっかかります。
理屈を覚えたら超簡単。

レスポンシブな背景に文字を載せてみる

メインビジュアルなんかではレスポンシブで背景画像を利用したblock要素を使ったりなんかしますが、
上に文字をかぶせたくなんかなります。
だけれど、そのまま文字を配置しようと思っても単なるblock要素じゃなく、paddingが入っているのでうまくいきません。
これも解決方法は難しくなくて、絶対位置で配置すればいいだけ。

まず、HTMLは見出しとかの要素を追加する。

<div class="block_bg">
  <div class="block__title">ホームページ制作　YCOM</div>
</div>

CSSは一見難しく見えるけれど、次のことをしているだけ。

• .block_bgの左上を基準にするために相対位置の指定をする。position:relativeあたり。
• .block__titleはいろいろと装飾しているけれど、要はposition:absoluteを使って絶対位置を指定してるだけ

コードは少し長いけれど、ほとんどは装飾で人によって違う。
大事なのは上の2点だけ。

.block_bg {
  background: url("http://www.y-com.info/contents/wp-content/uploads/2016/12/OAV9EA0.jpg") center;
  background-size: cover;
  width: 35%;
  padding-top: 20%;
  position: relative;
  top: 0;
  left: 0;
}

.block_bg .block__title {
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 30%;
  width: 100%;
  font-size: 20px;
  line-height: 5em;
  color: #fff;
  text-align: center;
  font-weight: bold;
}

悪戦苦闘していた人もいるかもしれないけれど、理屈を覚えたらそんなに難しくないでしょ。
よくわからない人は、上のコードをコピペして自由に編集して使ってください。