Tylko CSS 3 to wspiera,

background-size: 200px 50px;

Ale edytowałbym sam obraz, aby użytkownik musiał ładować mniej i może wyglądać lepiej niż skurczony obraz bez antyaliasingu.

Jeśli użytkownicy używają tylko Opery 9.5+, Safari 3+, Internet Explorer 9 + i Firefox 3.6+, odpowiedź brzmi tak. Inaczej nie.

Właściwość background-size jest częścią CSS 3, ale nie będzie działać na większości przeglądarek.

Dla Twoich celów po prostu Powiększ rzeczywisty obraz.

Niemożliwe . Tło zawsze będzie tak duże, jak to tylko możliwe, ale można go powstrzymać od powtarzania się z background-repeat.

background-repeat: no-repeat;

Po Drugie, tło nie wchodzi w obszar marginesu pudełka, więc jeśli chcesz, aby tło było tylko na rzeczywistej zawartości pudełka, możesz użyć marginesu zamiast wypełnienia.

Po trzecie, możesz kontrolować, gdzie zaczyna się obraz tła. Domyślnie jest to lewy górny róg pudełka, ale możesz to kontrolować za pomocą background-position, tak:

background-position: center top;

A może

background-position: 20px -14px;

Pozycjonowanie negatywne jest często używane z CSS sprites .

Nie za mocno, jeśli nie boisz się pójść trochę głębiej:)

Jest jedenzapomniany argument:

background-size: contain;

To nie będzie rozciągać background-image Jak to zrobi z cover. Rozciągałoby się, aż dłuższa strona osiągnie szerokość lub wysokość zewnętrznego pojemnika, a tym samym zachowując obraz.

Edit: są też -webkit-background-size i -moz-background-size.

Właściwość background-size JEST OBSŁUGIWANA W IE9+, Firefox 4+, Opera, Chrome i Safari 5+.

^{- Źródło: W3 Szkoły}

Background-size: 200px 50px zmień go na 100% 100% i będzie skalowany w zależności od potrzeb tagu zawartości, takiego jak ul li lub div... próbowałem

Możesz całkowicie z 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;
 }

Spowoduje to Rozmiar obrazu tła do 100% szerokości elementu body, a następnie odpowiednio zmieni rozmiar tła, gdy element body zmieni rozmiar dla mniejszych rozdzielczości.

Oto przykład: http://www.sccc.premiumdw.com/examples/resize-background-images-with-css/

Wystarczy, że zagnieżdżone div będą kompatybilne z przeglądarką

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

Na poparcie odpowiedzi, którą dał @tetra, chcę zaznaczyć, że jeśli obraz jest SVG, zmiana rozmiaru rzeczywistego obrazu nie jest konieczna.

Ponieważ plik SVG jest po prostu XML, możesz określić dowolny rozmiar, który ma się pojawić w XML.

Jeśli jednak używasz tego samego obrazu SVG w różnych miejscach i potrzebujesz go o różnych rozmiarach, użycie background-size jest bardzo pomocne. Pliki SVG są z natury mniejsze niż obrazy rastrowe i zmiana rozmiaru w locie za pomocą CSS może bądź bardzo pomocny bez żadnych kosztów wydajności, o których wiem, a na pewno niewiele lub nie ma utraty jakości.

Oto krótki przykład:

<div class="hasBackgroundImage">content</div>

.hasBackgroundImage
{
    background: transparent url('/image/background.svg') no-repeat 10px 5px;
    background-size: 1.4em;
}

Możesz użyć dwóch <div> elementów:

• Jednym z nich jest pojemnik (jest to ten, który pierwotnie chciał obrazek tła do wyświetlenia na).

• Drugi jest zawarty wewnątrz. Ustawiasz jego rozmiar na rozmiar obraz tła (lub rozmiar, który chcesz wyświetlić).

Zawarty div jest następnie ustawiany na pozycję absolute. W ten sposób nie zakłóca normalnego przepływu elementów w div zawierającym.

Umożliwia efektywnie używaj obrazów sprite.

Nie można ustawić rozmiaru obrazu tła przy użyciu bieżącej wersji CSS (2.1).

Można ustawić tylko: position, fix, image-url, repeat-mode, i color.

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;

Napisałeś

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

Ale zobaczysz tylko tło w zależności od rozmiaru kontenera.

Jeśli masz pusty kontener z adresem URL tła i niezależnie od rozmiaru tła, nie zobaczysz bg.gif.

Jeśli ustawisz rozmiar continera na

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

W połączeniu z kodem, który napisałeś powyżej, będziesz mógł zobaczyć BG.plik gif.

Jeśli chcesz ustawić background-size w tej samej właściwości background możesz użyć use:

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

background-size działa w Chrome 4.1, ale do tej pory nie mogłem zrobić to działa w Firefoksie 3.6.

Używam obrazów tła dla przycisków, ale wyświetla tylko obraz o takim samym rozmiarze jak tekst, nawet jeśli ustawiam szerokość i wysokość. Zamiast tego wstawiam tekst za pomocą znaków   (niełamliwe spacje). Wciskam tyle, ile potrzeba, w zasadzie, aż pojawi się całe tło przycisku. Więc mogę mieć taki kod:

W arkuszu stylów:

#v2menu-home {
    background-image:url(../v2-siteimages/button.png);
    background-repeat:no-repeat;
}

W dokumencie 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 -->

Na przykład:
Obraz tła zawsze będzie pasował do rozmiaru kontenera (Szerokość 100% i wysokość 100px).
Cross-browser 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;

}

Jest to możliwe do zrobienia w CSS3 z background-size

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