Blog

HOME > Web > css > 【CSS】背景画像の縦横比率をそのままでレスポンシブ対応にする方法

【CSS】背景画像の縦横比率をそのままでレスポンシブ対応にする方法

2017/04/15

css

備忘録です。

背景画像の縦横比率をそのままでレスポンシブ対応にする方法です。

参考サイト
スマホ対応に役立つ。背景画像を縦横比そのままでレスポンシブ対応するためのCSSの書き方。

HTML

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

通常のCSS

.block_bg{
  background: url('test.jpg') center;
  background-size: cover;
  width: 50%;
  height: 280px;
}

これですと、高さが280pxで固定となるためpadding-topで指定をします。

.block_bg{
  background: url('test.jpg') center;
  background-size: cover;
  width: 50%;
  padding-top:20%;
}

padding-topの数値は画像サイズによって変えてください。

カテゴリー

月間アーカイブ

«前の記事

一覧に戻る

次の記事»

最近の投稿

人気の記事

MORE

ミュージシャンズ・プラザ

神社仏閣ホームーページ制作

ホームページ制作問合せ