Ustaw rozmiar obrazu tła za pomocą CSS?

386

Czy można ustawić rozmiar obrazu tła za pomocą CSS?

Chcę zrobić coś takiego:

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

Ale wydaje się, że to całkowicie niewłaściwe robić to w ten sposób ...

Johan
źródło
Może to możliwe. Zobacz: Jak zmienić rozmiar obrazu tła .
Ricardo de la Vega

Odpowiedzi:

621

CSS2

Jeśli chcesz powiększyć obraz, musisz edytować sam obraz w edytorze obrazów.

Jeśli używasz znacznika img, możesz zmienić rozmiar, ale nie dałoby to pożądanego rezultatu, jeśli chcesz, aby obraz był tłem dla innych treści (i nie będzie się powtarzał tak, jak chcesz) ...

CSS3 uwalnia moce

Można to zrobić w CSS3 z background-size.

Wszystkie nowoczesne przeglądarki obsługują to, więc jeśli nie potrzebujesz obsługi starych przeglądarek, jest to odpowiedni sposób.
Obsługiwane przeglądarki:
Mozilla Firefox 4.0+ (Gecko 2.0+), Microsoft Internet Explorer 9.0+, Opera 10.0+, Safari 4.1+ (webkit 532) i 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;
}

W szczególności podoba mi się wartość coveri contain, która daje nam nową moc kontroli, której wcześniej nie mieliśmy.

Okrągły

Możesz także użyć background-size: roundtego, co ma znaczenie w połączeniu z powtórzeniem:

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

Spowoduje to dostosowanie szerokości obrazu, dzięki czemu będzie pasować całą liczbę razy w obszarze pozycjonowania tła.


Uwaga dodatkowa
Jeśli wymagany rozmiar to rozmiar statyczny w pikselach, rozsądnie jest fizycznie zmienić rozmiar rzeczywistego obrazu. Ma to na celu zarówno poprawę jakości zmiany rozmiaru (biorąc pod uwagę, że twoje oprogramowanie do grafiki lepiej działa niż przeglądarki), jak i oszczędność przepustowości, jeśli oryginalny obraz jest większy niż to, co ma być wyświetlane.

groza
źródło
7
Należy pamiętać, że pojawia się również kwestia wyświetlaczy siatkówki na iPadzie i iPhonie oraz prawdopodobnie innych urządzeniach o wysokiej rozdzielczości. Oznacza to, że warto przeskalować większe obrazy za pomocą CSS i użyć wielu plików CSS i innych sztuczek do obsługi określonych obrazów. Miłe wprowadzenie do tego tutaj: webmonkey.com/2012/03/...
Leo
Jest to na razie najgorsze rozwiązanie, ponieważ nie każdy sklep internetowy zamierza zmienić rozmiar obrazu zgodnie z sugestią. W 2009 roku najprawdopodobniej była blisko najlepszej opcji, teraz wystarczy użyć atrybutów wielkości, jak poniżej.
ShaunOReilly,
332

Obsługuje to tylko CSS 3,

background-size: 200px 50px;

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

Maertz
źródło
32
Niestety, ludzie nadal używają ie8
Dean_Wilson
16
Wstydź się na Microsoft za okropną przeglądarkę
Mahmoodvcs,
Zakończenie 2013, wciąż muszę dodać background: url('resized_image.png')\9;dla IE lt 9
skobaljic
To jest droga, aby przejść nawet w 2017 roku!
Francisco Ochoa,
Pochodzę także z 2017 roku i tak to robimy.
Ska
23

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

Właściwość wielkości tła jest częścią CSS 3, ale nie będzie działać w większości przeglądarek.

Do swoich celów po prostu powiększ rzeczywisty obraz.

Christopher Tokar
źródło
1
rozmiar tła: 100%; pozycja tła: środek; - działa to w IE6 uruchomionym na mojej maszynie wirtualnej na XP Home.
InnateDev,
7
IE 6,7,8 nie jest „większością przeglądarek”.
Mahmoodvcs,
1
Nawet w 2013 r. - chociaż komentarz „IE6,7,8 nie jest„ większością przeglądarek ”” może być częściowo prawdziwy w odniesieniu do IE6; Niestety, IE7 i IE8 nadal mają dość imponujący udział w rynku. Najlepszym sposobem, jaki to zrobiłem, jest użycie Javascript w połączeniu z Moderr (lub innym sposobem oznaczania „OLDIE”).
AndrewPK,
19

Nie jest możliwe . Tło zawsze będzie tak duże, jak to możliwe, ale możesz powstrzymać się przed powtórzeniem się background-repeat.

background-repeat: no-repeat;

Po drugie, tło nie przechodzi w obszar marginesu ramki, więc jeśli chcesz, aby tło było tylko na rzeczywistej zawartości ramki, 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 pola, ale możesz to kontrolować za pomocą background-position:

background-position: center top;

a może

background-position: 20px -14px;

Negatywne pozycjonowanie jest często używane w przypadku duszków CSS .

mikl
źródło
Nie, nie jest tak duży, jak tylko mogę. Zawsze ma ten sam rozmiar, ale muszę to zrobić większy.
Johan
To nie jest możliwe. W przyszłych wersjach CSS mogą istnieć takie możliwości, ale jest to jeszcze daleka droga.
mikl
Ta odpowiedź jest zła. CSS3 ma właściwość wielkości tła obsługiwaną w IE9 +.
Ulewa 046
3
Spójrz na znacznik czasu. W 2009 r. Rozmiar tła był zaledwie błyskiem w oczach WebKit. Jeśli chcesz, możesz go zaktualizować, ale jest już wiele innych odpowiedzi opisujących rozmiar tła.
mikl
12

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

Jest jeden zapomniany argument:

background-size: contain;

To nie rozciągnie twojego, background-imagejak by to zrobiło cover. Rozciągałby się, aż dłuższy bok osiągnie szerokość lub wysokość zewnętrznego pojemnika, a tym samym zachowuje obraz.

Edycja: Jest też -webkit-background-sizei -moz-background-size.

Właściwość rozmiaru tła jest obsługiwana w IE9 +, Firefox 4+, Opera, Chrome i Safari 5+.

- Źródło: W3 Schools

kajzer
źródło
3

rozmiar tła: 200px 50px zmień go na 100% 100% i będzie skalować się do potrzeb tagu treści takiego jak ul li lub div ... wypróbowałem

Mihai
źródło
3

Na poparcie odpowiedzi udzielonej przez @tetra chcę podkreślić, że jeśli obraz jest plikiem SVG, zmiana rozmiaru obrazu rzeczywistego nie jest konieczna.

Ponieważ plik SVG to tylko XML, możesz określić dowolny rozmiar, który ma się pojawiać w pliku XML.

Jeśli jednak używasz tego samego obrazu SVG w różnych miejscach i potrzebujesz różnych rozmiarów, użycie background-sizejest bardzo pomocne. Pliki SVG i tak są z natury mniejsze niż obrazy rastrowe, a zmiana rozmiaru w locie za pomocą CSS może być bardzo pomocna bez żadnych kosztów wydajności, o których jestem świadomy, a na pewno niewielka utrata jakości.

Oto szybki przykład:

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

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

(Uwaga: działa to dla mnie w OS X 10.7 z Firefox 8, Safari 5.1 i Chrome 16.0.912.63)

SunSparc
źródło
3

Z CSS3 możesz całkowicie:

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 zmianę rozmiaru obrazu tła do 100% szerokości elementu korpusu, a następnie odpowiednio zmieni rozmiar tła w miarę zmiany rozmiaru elementu korpusu w przypadku mniejszych rozdzielczości.

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

Mike Sinkula
źródło
2

Wystarczy zagnieździć div, aby były kompatybilne z różnymi przeglądarkami

   
      <div>
         <div style="background: url('bg.gif') top repeat-y;min-width:490px;">
            Put content here
         </div>
      </div>
   
Cornelius Lamb
źródło
2

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

  • Jeden to pojemnik (to ten, w którym pierwotnie chciałeś, aby pojawił się obraz tła).

  • Drugi jest zawarty w. Ustawiasz jego rozmiar na rozmiar obrazu tła (lub rozmiar, który ma się pojawiać).

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

Umożliwia wydajne wykorzystanie obrazów sprite.

Ben Shomer
źródło
1

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

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

knittl
źródło
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;
Shwetha SH
źródło
1

Napisałeś

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

ale tło będzie widoczne tylko w zależności od wielkości pojemnika.

jeśli masz pusty pojemnik z URL-em w tle i bez względu na rozmiar tła, nie zobaczysz bg.gif.

Jeśli ustawisz rozmiar kontynentu 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ć plik bg.gif.

Carlos Calla
źródło
0

background-size działa w Chrome 4.1, ale jak dotąd nie mogłem go uruchomić w Firefoksie 3.6.

srebrzysty
źródło
0

Używam obrazów tła do przycisków, ale pokazuje on tylko ten sam rozmiar co tekst, nawet jeśli ustawię szerokość i wysokość. Zamiast tego wypełniam tekst &nbsp;znakami (niełamliwe spacje). Zasadniczo uderzam tyle, ile potrzeba, aż pojawi się całe tło przycisku. 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 -->
Martin Thompson
źródło
2
Innym sposobem jest ustawienie rozmiaru łącza do rozmiaru obrazu tła. W arkuszu stylów (pod # v2menu-home w powyższym przykładzie) użyj display: block i ustaw tam wysokość i szerokość. To faktycznie działa. Nie trzeba wtedy używać nieprzerwanych znaków spacji.
Martin Thompson
0

Na przykład:
obraz tła zawsze będzie pasował do rozmiaru pojemnika (szerokość 100% i wysokość 100 pikseli).
CSS w różnych przeglądarkach:

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

}

skyrosbit
źródło
0

Można to zrobić w CSS3 z rozmiarem tła

.backgroungImage {
    background: url('../imageS/background.jpg') no-repeat;
    background-size: 32px 32px;
}
omkar khade
źródło
0

Jeśli chcesz ustawić background-sizetę samą backgroundwłaściwość, możesz użyć:

background:url(my-bg.png) no-repeat top center / 50px 50px;
Ratata Tata
źródło
Nie mogę przetestować, ale prawdopodobnie.
Ratata Tata,
Myślałem, że iPady nie rozpoznają skróconego tła @ Orlando-
Leite