CSSで背景画像のサイズを設定しますか?


386

CSSで背景画像のサイズを設定することは可能ですか?

私は次のようなことをしたいです:

background: url('bg.gif') top repeat-y;
background-size: 490px;

しかし、それをそのようにするのはまったく間違っているようです...


多分それは可能です。方法:サイズ変更可能な背景画像を参照してください。
Ricardo de la Vega、

回答:


621

CSS2

画像を大きくする必要がある場合は、画像エディターで画像自体を編集する必要があります。

imgタグを使用する場合、サイズを変更できますが、他のコンテンツの背景となる画像が必要な場合は、望ましい結果が得られません(また、希望どおりに繰り返されません)...

CSS3 がパワーを解き放つ

これは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;
}

特に、以前にはなかった新しい制御力をもたらすcovercontain値が好きです。

円形

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;
}

これにより、画像の幅が調整され、背景の配置領域に何度も収まります。


補足事項
必要なサイズが静的なピクセルサイズである場合でも、実際の画像のサイズを物理的に変更する方が賢明です。これは、サイズ変更の品質を向上させるため(画像ソフトウェアがブラウザーよりも優れている場合)、および元の画像が表示する画像よりも大きい場合に帯域幅を節約するためです。


7
iPadとiPhoneのRetinaディスプレイの問題、そしておそらく他の高解像度デバイスも問題になることに注意してください。つまり、CSSを使用して大きな画像のサイズを変更し、複数のCSSファイルやその他のトリックを使用して特定の画像を提供することは価値があるということです。ニースはここにINTRO:webmonkey.com/2012/03/...
レオ

すべてのeコマースショップが提案どおりに画像のサイズを変更するわけではないため、これは現時点で最悪のソリューションです。2009年には、それはおそらく最良のオプションに近いものでしたが、現在は以下のようにサイズ属性を使用するだけです。
ShaunOReilly

332

CSS 3だけがそれをサポートします、

background-size: 200px 50px;

しかし、私は画像自体を編集するので、ユーザーがロードする必要が少なくなり、アンチエイリアスなしの縮小された画像よりも見栄えがよくなるかもしれません。


32
残念ながら、人々はまだie8を使用しています
Dean_Wilson

16
ひどいブラウザーであるMicrosoftの恥
Mahmoodvcs

2013年終了、background: url('resized_image.png')\9;IE lt 9 に追加する必要があります
skobaljic

これは2017年でさえ進むべき道です!
フランシスコオチョア

私も2017年から来ましたが、これが私たちのやり方です。
スカ

23

ユーザーがOpera 9.5以降、Safari 3以降、Internet Explorer 9以降、Firefox 3.6以降のみを使用している場合、答えは「はい」です。そうでなければ、いいえ。

背景サイズのプロパティはCSS 3の一部ですが、それはほとんどのブラウザでは動作しません。

あなたの目的のために、実際の画像を大きくしてください。


1
背景サイズ:100%; background-position:center; -これは、XP Home上の仮想マシンで実行されているIE6で動作します。
InnateDev 2011

7
IE 6,7,8は「ほとんどのブラウザ」ではありません。
Mahmoodvcs

1
2013年でさえ、「IE6、7、8は「ほとんどのブラウザー」ではない」というコメントは、IE6に関して部分的に当てはまる可能性があります。IE7とIE8は、残念ながら、かなり大きな市場シェアを持っています。私がこれを行うことがわかった最善の方法は、Javascriptをmodernizr(または「OLDIE」にタグ付けする他の方法)と組み合わせて使用​​することです。
AndrewPK 2013年

19

できません。背景は常に最大の大きさになりますが、で繰り返すのをやめることができますbackground-repeat

background-repeat: no-repeat;

第2に、背景はボックスのマージン領域に入らないため、ボックスの実際のコンテンツのみに背景を配置したい場合は、パディングの代わりにマージンを使用できます。

3番目に、背景画像の開始位置を制御できます。デフォルトではボックスの左上隅ですがbackground-position、次のようにで制御できます。

background-position: center top;

多分

background-position: 20px -14px;

ネガティブポジショニングはCSSスプライトでよく使用されます。


いいえ、できる限り大きくはありません。いつも同じサイズですが、もっと大きくする必要があります。
ヨハン、

まあ、それは不可能です。CSSの将来のバージョンでそれを行うためのオプションがあるかもしれませんが、それは遠い道のりです。
mikl 2009

この答えは間違っています。CSS3には、IE9 +でサポートされているbackground-sizeプロパティがあります。
Downpour046 14

3
タイムスタンプを見てください。2009年、background-sizeはWebKitの目にはきらきらでした。必要に応じて自由に更新してください。ただし、background-sizeについては他にもたくさんの回答があります。
mikl 14

12

あなたがもう少し深く行くことを恐れていないなら、それほど難しくありません:)

忘れられた論点が1つあります。

background-size: contain;

これは、のbackground-imageように伸びませんcover。長い方の辺が外側のコンテナの幅または高さに達するまで伸びるので、画像が保持されます。

編集:-webkit-background-sizeともあり-moz-background-sizeます。

background-sizeプロパティは、IE9以降、Firefox 4以降、Opera、Chrome、Safari 5以降でサポートされています。

-出典:W3 Schools


3

background-size:200px 50pxを100%100%に変更すると、ul liやdivなどのコンテンツタグのニーズに応じてスケーリングされます...試してみました


3

@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で動作します)


3

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/


2

ネストされたdivを持っているだけで、クロスブラウザ互換になります

   
      <div>
         <div style="background: url('bg.gif') top repeat-y;min-width:490px;">
            Put content here
         </div>
      </div>
   

2

次の2つの<div>要素を使用できます。

  • 1つはコンテナです(最初に背景画像を表示したいコンテナです)。

  • 2つ目は中に含まれています。サイズを背景画像のサイズ(または表示するサイズ)に設定します。

次に、含まれるdivが配置されるように設定されますabsolute。これにより、含まれているdiv内のアイテムの通常のフローを妨げることはありません。

スプライト画像を効率的に使用できます。


1

現在のバージョンのCSS(2.1)では、背景画像のサイズを設定できません。

:あなただけ設定することができpositionfiximage-urlrepeat-mode、とcolor


1
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;

1

あなたが書いた

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ファイルが表示されます。


0

background-size はChrome 4.1で動作していますが、これまでのところ、Firefox 3.6で動作させることはできませんでした。


0

ボタンの背景画像を使用していますが、幅と高さを設定しても、テキストと同じサイズの画像しか表示されません。代わりに、テキストに&nbsp;文字(改行しないスペース)を埋め込みます。基本的に、ボタンの背景がすべて表示されるまで、必要な数だけタップします。だから私はこのようなコードを持っているかもしれません:

スタイルシートで:

#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&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
</div><!-- v2menu -->

2
別の方法は、リンクのサイズを背景画像のサイズに設定することです。スタイルシートで(上記の例の#v2menu-homeの下で)、display:blockを使用して高さと幅を設定します。それは実際に機能します。改行しないスペース文字は必要ありません。
マーティントンプソン

0

例:
背景画像は常にコンテナサイズ(幅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;

}


0

これはbackground-sizeを使用してCSS3で行うことができます

.backgroungImage {
    background: url('../imageS/background.jpg') no-repeat;
    background-size: 32px 32px;
}

0

background-size同じbackgroundプロパティを設定したい場合は、次を使用できます。

background:url(my-bg.png) no-repeat top center / 50px 50px;

テストはできませんが、たぶん。
Ratata Tata

iPadが省略形の背景@ orlando-leiteを認識しないと思った
DGRFDSGN
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.