私は
body {
background: url(images/background.svg);
}
希望する効果は、この背景画像の幅がページの幅と等しく、高さは比率を維持するために変更されることです。例えば、元の画像が100*200(任意の単位)で、本体の幅が600pxの場合、背景画像の高さは1200pxになるはずです。ウィンドウのサイズが変更された場合、高さは自動的に変更されるべきです。これは可能でしょうか?
今のところ、Firefoxは高さを合わせてから幅を調整しているように見えます。これはおそらく、高さが最も長い寸法であるため、トリミングを避けようとしているのではないでしょうか?私は縦方向にトリミングしてからスクロールしたいのですが、横方向の繰り返しはできません。
また、Chromeでは、background-repeat:repeat
が明示的に指定されていても、画像が中央に配置され、リピートはありません(これはデフォルトです)。
これにはCSS3のプロパティ、すなわち[background-size
][1](互換性チェック)があります。長さの値を設定することもできますが、通常は特別な値であるcontain
やcover
と一緒に使用されます。あなたのケースでは、cover
を使うべきです。
body {
background-image: url(images/background.svg);
background-size: cover; /* <------ */
background-repeat: no-repeat;
background-position: center center; /* optional, center the image */
}
contain
and cover
駄洒落で申し訳ありませんが、picture of the day by Biswarup Gangulyを使ってデモをしてみます。これがあなたの画面で、灰色の部分があなたの見える画面の外側だとします。デモでは、16x9の比率を想定しています。
.
前述の「今日の一枚」を背景に使いたいと思います。しかし、何らかの理由で画像を4x3にトリミングしてしまいました。background-sizeプロパティに何らかの固定長を設定することもできますが、ここでは
containと
coverに注目します。なお、ここでは
body` の幅や高さを変更していないことを前提としています。
contain
含む
contain
> contain ### contain
> contain ### contain
> contain 画像を、本来のアスペクト比を維持したまま、幅と高さが背景の配置領域に収まる最大のサイズに拡大します。これにより、背景画像は常に背景配置領域内に完全に収まるようになりますが、この場合、background-color
で塗りつぶされた空きスペースが生じる可能性があります。
.
cover
(カバー)カバー
画像のアスペクト比を維持したまま、幅と高さの両方が背景の配置領域を完全に覆う最小のサイズに縮小します。
これにより、背景画像がすべてを覆うようになります。背景色」は表示されませんが、スクリーンの比率によっては、画像の大部分が切り取られてしまうことがあります。
.
div > div {
background-image: url(http://i.stack.imgur.com/r5CAq.jpg);
background-repeat: no-repeat;
background-position: center center;
background-color: #ccc;
border: 1px solid;
width: 20em;
height: 10em;
}
div.contain {
background-size: contain;
}
div.cover {
background-size: cover;
}
/********************************************
Additional styles for the explanation boxes
*********************************************/
div > div {
margin: 0 1ex 1ex 0;
float: left;
}
div + div {
clear: both;
border-top: 1px dashed silver;
padding-top:1ex;
}
div > div::after {
background-color: #000;
color: #fefefe;
margin: 1ex;
padding: 1ex;
opacity: 0.8;
display: block;
width: 10ex;
font-size: 0.7em;
content: attr(class);
}
<div>
<div class="contain"></div>
<p>Note the grey background. The image does not cover the whole region, but it's fully <em>contained</em>.
</p>
</div>
<div>
<div class="cover"></div>
<p>Note the ducks/geese at the bottom of the image. Most of the water is cut, as well as a part of the sky. You don't see the complete image anymore, but neither do you see any background color; the image <em>covers</em> all of the <code><div></code>.</p>
</div>
[1]: http://www.w3.org/TR/2011/CR-css3-background-20110215/#the-background-size
https://developer.mozilla.org/en-US/docs/CSS/background-size からのヒントをもとに、私は次のようなレシピにたどり着きました。
body {
overflow-y: hidden ! important;
overflow-x: hidden ! important;
background-color: #f8f8f8;
background-image: url('index.png');
/*background-size: cover;*/
background-size: contain;
background-repeat: no-repeat;
background-position: right;
}
あなたが何を探しているのか正確にはわかりませんが、CSS-TricksのChris Coyierが書いた素晴らしいブログ記事をぜひご覧ください。
http://css-tricks.com/how-to-resizeable-background-image/
http://css-tricks.com/perfect-full-page-background-image/
それぞれの記事の説明を読んで、自分が求めているものかどうかを確認してください。
最初のものは、次の質問に答えています。
背景画像のサイズを変更できるようにする方法はありますか?例えば、ブラウザのウィンドウサイズに関係なく、Webページの背景を画像で端から端まで埋めることができます。また、ブラウザのウィンドウサイズが変わっても、画像のサイズを変更できるようにしてください。また、比率を維持したまま(変に伸びないように)表示すること。また、スクロールバーを発生させず、必要に応じて縦に切り離すこと。また、ページ内ではインラインのタグとして表示されます。
2つ目の投稿の目的は、以下のように、ブラウザウィンドウ全体を常に覆うようなウェブサイトの背景画像を得ることです。
お役に立てれば幸いです。