回答:
画像を大きくする必要がある場合は、画像エディターで画像自体を編集する必要があります。
imgタグを使用する場合、サイズを変更できますが、他のコンテンツの背景となる画像が必要な場合は、望ましい結果が得られません(また、希望どおりに繰り返されません)...
これはCSS3でを使用して行うことができbackground-size
ます。
すべての最新のブラウザーがこれをサポートしているため、古いブラウザーをサポートする必要がない限り、これがその方法です。
サポートされているブラウザー:
Mozilla Firefox 4.0以降(Gecko 2.0以降)、Microsoft Internet Explorer 9.0以降、Opera 10.0以降、Safari 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;
しかし、私は画像自体を編集するので、ユーザーがロードする必要が少なくなり、アンチエイリアスなしの縮小された画像よりも見栄えがよくなるかもしれません。
background: url('resized_image.png')\9;
IE lt 9 に追加する必要があります
ユーザーがOpera 9.5以降、Safari 3以降、Internet Explorer 9以降、Firefox 3.6以降のみを使用している場合、答えは「はい」です。そうでなければ、いいえ。
背景サイズのプロパティはCSS 3の一部ですが、それはほとんどのブラウザでは動作しません。
あなたの目的のために、実際の画像を大きくしてください。
できません。背景は常に最大の大きさになりますが、で繰り返すのをやめることができますbackground-repeat
。
background-repeat: no-repeat;
第2に、背景はボックスのマージン領域に入らないため、ボックスの実際のコンテンツのみに背景を配置したい場合は、パディングの代わりにマージンを使用できます。
3番目に、背景画像の開始位置を制御できます。デフォルトではボックスの左上隅ですがbackground-position
、次のようにで制御できます。
background-position: center top;
多分
background-position: 20px -14px;
ネガティブポジショニングはCSSスプライトでよく使用されます。
忘れられた論点が1つあります。
background-size: contain;
これは、のbackground-image
ように伸びませんcover
。長い方の辺が外側のコンテナの幅または高さに達するまで伸びるので、画像が保持されます。
編集:-webkit-background-size
ともあり-moz-background-size
ます。
background-sizeプロパティは、IE9以降、Firefox 4以降、Opera、Chrome、Safari 5以降でサポートされています。
@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で動作します)
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%になり、ボディ要素のサイズが小さい解像度に合わせて変更されるのに応じて、背景のサイズも変更されます。
次に例を示します。http://www.sccc.premiumdw.com/examples/resize-background-images-with-css/
あなたが書いた
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ファイルが表示されます。
ボタンの背景画像を使用していますが、幅と高さを設定しても、テキストと同じサイズの画像しか表示されません。代わりに、テキストに
文字(改行しないスペース)を埋め込みます。基本的に、ボタンの背景がすべて表示されるまで、必要な数だけタップします。だから私はこのようなコードを持っているかもしれません:
スタイルシートで:
#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 -->
例:
背景画像は常にコンテナサイズ(幅100%、高さ100px)に適合します。
クロスブラウザ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;
}
これはbackground-sizeを使用してCSS3で行うことができます
.backgroungImage {
background: url('../imageS/background.jpg') no-repeat;
background-size: 32px 32px;
}
background-size
同じbackground
プロパティを設定したい場合は、次を使用できます。
background:url(my-bg.png) no-repeat top center / 50px 50px;