CSSで背景画像のサイズを設定しますか？
CSSで背景画像のサイズを設定することは可能ですか？
私は何かをしたいのですが。
background: url('bg.gif') top repeat-y;
background-size: 490px;
しかし、そのようにするのはまったく間違っているようです….
CSS2
あなたは、画像を大きくする必要がある場合は、画像エディタで画像自体を編集する必要があります。
あなたはimgタグを使用する場合は、サイズを変更することができますが、あなたは（あなたが望むように見えるように、それは自分自身を繰り返すことはしません）いくつかの他のコンテンツの背景となる画像が必要な場合、それはあなたが希望する結果が得られないだろう...
CSS3 力を解き放ちます
これはCSS3でbackground-sizeを使って行うことができます。
古いブラウザをサポートする必要がない限り、これはそれを行うための方法であるように、すべての近代的なブラウザでは、この機能をサポート。
サポートされているブラウザ：
Mozilla Firefoxの4.0以降（ヤモリ2.0+）は、MicrosoftのInternet Explorer 9.0以降、Operaの10.0+、サファリ4.1以降（webkitの532）とChrome 3.0+。
.stretch{
/* Will stretch to specified width/height */
background-size: 200px 150px;
}
.stretch-content{
/* Will stretch to width/height of element */
background-size: 100% 100%;
}
.resize-width{
/* width: 150px, height: auto to retain aspect ratio */
background-size: 150px Auto;
}
.resize-height{
/* height: 150px, width: auto to retain aspect ratio */
background-size: Auto 150px;
}
.resize-fill-and-clip{
/* Resize to fill and retain aspect ratio.
Will cause clipping if aspect ratio of box is different from image. */
background-size: cover;
}
.resize-best-fit{
/* Resize to best fit and retain aspect ratio.
Will cause gap if aspect ratio of box is different from image. */
background-size: contain;
}
特に、私は、私たちが前に持っていなかったコントロールの新しい力を与えcoverとcontain値が好き。
円形
繰り返しと組み合わせて意味を持つbackground-size: roundを使用することもできます。
.resize-best-fit-in-repeat{
/* Resize to best fit in a whole number of times in x-direction */
background-size: round auto; /* Height: auto is to keep aspect ratio */
background-repeat: repeat;
}
それは背景配置領域に時間の全体数に合うように、これは、画像の幅を調整します。
追加ノート
あなたが必要とするサイズは、静的なピクセルサイズであれば、物理的に実際の画像サイズを変更するには、まだスマートです。これは、（あなたのイメージソフトウェアがブラウザよりも良い仕事をしていることを与えられた）サイズ変更の品質を向上させるために、原画像を表示するものよりも大きい場合、帯域幅を節約するために、両方のです。
それをサポートしているのはCSS 3だけです。
background-size: 200px 50px;
しかし、私は画像自体を編集するので、ユーザーがロードする必要が少なくなり、アンチエイリアスなしで縮小された画像より見栄えがよくなるかもしれません。
ユーザーがOpera 9.5以降、Safari 3以降、Internet Explorer 9以降、Firefox 3.6以降のみを使用している場合、その答えはイエスです。そうでなければ、いいえ。
background-size プロパティはCSS 3の一部ですが、ほとんどのブラウザでは動作しません。
あなたの目的のためにちょうど実際の画像を大きくしてください。
ありえない。背景は常にできるだけ大きくなりますが、 background-repeat を使用して背景が繰り返されるのを防ぐことができます。
background-repeat: no-repeat;
次に、背景はボックスのマージン領域に入りません。そのため、背景をボックスの実際の内容だけにしたい場合は、パディングの代わりにマージンを使用できます。
第三に、背景画像の開始位置を制御できます。デフォルトではボックスの左上隅ですが、これを background-position で制御できます。
background-position: center top;
多分
background-position: 20px -14px;
ネガティブポジショニングは CSSスプライト でよく使われます。
もう少し深くなることを恐れていないのであれば、それほど難しくはありません。
1つの 忘れられた 引数があります。
background-size: contain;
coverとは異なり、これはあなたのbackground-imageを拡張することはありません。長辺が外側の容器の幅または高さに達するまで伸びて、画像が保存されます。
編集：-webkit-background-sizeと-moz-background-sizeもあります。
Background-sizeプロパティは、IE 9以降、Firefox 4以降、Opera、Chrome、およびSafari 5以降でサポートされています。
あなたは完全にCSS3ですることができます：
body {
background-image: url(images/bg-body.png);
background-size: 100%; /* size the background image at 100% like any responsive img tag */
background-position: top center;
background-repeat:no-repeat;
}
これは背景画像をbody要素の幅の100％にサイズ変更し、body要素が小さい解像度に合わせてサイズ変更されるときにそれに応じて背景のサイズを変更します。
これがその例です。 http://www.sccc.premiumdw.com/examples/resize-background-images-with-css/
background-size：200px 50pxで100％から100％に変更すると、ul liやdivなどのコンテンツタグのニーズに合わせて拡大縮小されます。
@tetraが与えた答えを支持して、画像がSVGの場合、実際の画像のサイズを変更する必要はないことを指摘したいと思います。
SVGファイルは単なるXMLなので、XML内に表示するサイズを指定できます。
しかし、異なる場所で同じSVG画像を使用していて、それを異なるサイズにする必要がある場合は、background-sizeを使用すると非常に便利です。 SVGファイルはとにかくラスタ画像よりも本質的に小さいので、CSSを使ってその場でサイズ変更することは、私が知っているようなパフォーマンス上のコストをかけずに、そして品質の低下をほとんどまたはまったく伴わずに非常に役に立ちます。
これは簡単な例です。
<div class="hasBackgroundImage">content</div>
.hasBackgroundImage
{
background: transparent url('/image/background.svg') no-repeat 10px 5px;
background-size: 1.4em;
}
（注：Firefox 8、Safari 5.1、およびChrome 16.0.912.63を搭載したOS X 10.7では、これは機能します。）
ネストしたdivをクロスブラウザ互換にする
<div>
<div style="background: url('bg.gif') top repeat-y;min-width:490px;">
Put content here
</div>
</div>
2つの<div>要素を使用できます。
1つはコンテナです（これは元々背景画像を表示させたかったものです）。
2番目のものは内に含まれています。そのサイズを背景画像のサイズ（または表示したいサイズ）に設定します。
その後、含まれているdivがabsoluteの位置に設定されます。こうすることで、それを含むdiv内の項目の通常の流れが妨げられることはありません。
それはあなたが効率的にスプライト画像を使用することを可能にします。
あなたが書いた
background: url('bg.gif') top repeat-y;
background-size: 490px;
ただし、コンテナーのサイズに応じて背景のみが表示されます。
背景のURLと背景のサイズが何であれ、空のコンテナがある場合は、bg.gifは表示されません。
コンティニューのサイズをに設定した場合
background: url('bg.gif') top repeat-y;
background-size: 490px;
height: 490px;
width: 490px;
上記のコードと組み合わせると、bg.gifファイルを見ることができます。
put the below code in the body of you css file
background-image: URL('../images/wave-green-plain-colour.jpg') ;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width:100px;
現在のバージョンのCSS（2.1）では背景画像のサイズを設定できません。
設定できるのはposition、fix、image-url、repeat-mode、およびcolorだけです。
background-sizeはChrome 4.1で動作していますが、今のところFirefox 3.6で動作させることはできませんでした。
background-sizeを同じbackgroundプロパティに設定したい場合は、以下を使用できます。
background:url(my-bg.png) no-repeat top center / 50px 50px;
ボタンに背景画像を使用しますが、幅と高さを設定しても、テキストと同じサイズの画像しか表示されません。代わりに、テキストを 文字（改行なしのスペース）で埋めます。基本的に、ボタンの背景がすべて表示されるまで、必要な数だけスラップインします。だから私はこのようなコードがあるかもしれません：
スタイルシートで：
#v2menu-home {
background-image:url(../v2-siteimages/button.png);
background-repeat:no-repeat;
}
HTMLドキュメントでは：
<div id="v2menu">
<a id="v2menu-home" href="/index.php">home </a>
</div><!-- v2menu -->
これはCSS3でbackground-sizeで行うことが可能です
.backgroungImage {
background: url('../imageS/background.jpg') no-repeat;
background-size: 32px 32px;
}
例えば：
背景画像は常にコンテナサイズ（幅100％、高さ100ピクセル）に合わせて表示されます。
クロスブラウザCSS：
.app-header {
background: url("themes/default/images/background.jpg") no-repeat;
-moz-background-size: 100% 100px;
-webkit-background-size: 100% 100px;
-o-background-size: 100% 100px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src = "themes/default/images/background.jpg", sizingMethod = 'scale');
background-size: 100% 100px;
}