CSS 背景画像のサイズ調整

ヘッダーに背景画像を設定しました。
ですが、背景画像の横幅を画面いっぱいに表示したいのですが、うまくいきません。
比率を守るよりも、画像が全部表示したいです。
どうすれば、できますでしょうか？

CSS
1header{
2    height:400px;
3    max-width: 1280px;
4    background-image: url(../img_Photo/IMG_0207.JPG);
5    background-size: contain;
6    background-repeat: no-repeat;
7}

HTML
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <title>SS taxi</title>
6    <link href="CSS/reset.css" rel="stylesheet">
7    <link href="CSS/style.css" rel="stylesheet">
8  </head>
9  <body>
10    <header>
11    </header>
12  </body>
13</html>

よろしくお願いします！！

行動規範の内容に同意します

回答2件

ベストアンサー

background-size: cover; や background-size: contain; の場合、
背景画像素材の縦横比は維持したまま拡大・縮小するようになりますので、
背景画像を設定したい要素と実際に配置する画像の縦横比が異なる場合は、
背景画像の一部が見切れてしまう（cover）か、背景画像で覆われない領域が出る（contain）か、
どちらかとなってしまいます。

背景画像の縦横比を維持せず、変形させても良いのであれば、

background-size: 100% 100%;

とすれば良いと思います。

投稿2015/11/19 09:44