Jak wyśrodkować obraz (tła) w elemencie DIV?

136

Czy można wyśrodkować obraz tła w elemencie DIV? Próbowałem prawie wszystkiego - ale bez sukcesu:

<div id="doit">
  Lorem Ipsum ...
</div>

//CSS
#doit { background-image: url(images/pic.png); background-repeat: none; text-align: center; }

czy to możliwe?

oompahloompah
źródło

Odpowiedzi:

279
#doit {
    background: url(url) no-repeat center;
}
Jake Lucas
źródło
25
Dzięki. Specyficzny CSS do wyśrodkowania to „background-position: center;”
pmont
@Zielony: Zobacz moją odpowiedź dla obrazów tła sprite.
Clayton,
3
Jeśli chcesz, aby cały element div był wypełniony obrazem i nie było dodatkowego miejsca, powinieneś użyć background-size: cover; Jeśli chcesz, aby cały obraz był wyświetlany bez obcięcia lub rozciągnięcia żadnej części obrazu, którego chcesz użyćbackground-size: contain;
Zlerp
80

próbować background-position:center;

EDYTUJ: ponieważ to pytanie ma wiele wyświetleń, warto dodać dodatkowe informacje:

text-align: center nie będzie działać, ponieważ obraz tła nie jest częścią dokumentu i dlatego nie jest częścią przepływu.

background-position:centerjest skrótem background-position: center center; ( background-position: horizontal vertical);

TimCodes.NET
źródło
właściwie potrzebujeszbackground-position:center;
Dave Sag,
Wybrana odpowiedź powoduje, że z jakiegoś powodu całe moje tło znika (żeby być uczciwym, robię kilka rzeczy jQuery, które mogą to powodować?), Ale ta odpowiedź działa. Głosuj za.
bwoogie
15

Użyj pozycji tła:

background-position: 50% 50%;
Kapsuła
źródło
1
przydatne, jeśli chcesz, aby obraz był wyśrodkowany w poziomie, ale na górze pionowo: pozycja-tła: 50% 0%;
Sébastien Gicquel,
50% 0 jest krótsze niż wtedy ;-) W CSS nigdy nie potrzebujesz żadnej jednostki, gdy wartość wynosi 0
Kapsuła
8

Aby wyśrodkować lub ustawić obraz tła, użyj background-positionwłaściwości. Właściwość background-position ustawia początkową pozycję obrazu tła z topi po leftbokach elementu. Składnia CSS to background-position : xvalue yvalue;.

Obsługiwane wartości „xvalue” i „yvalue” to jednostki długości, takie jak pxwartości procentowe i nazwy kierunków, takie jak lewo, prawo itd.

„Wartość x” jest poziomą pozycją tła i zaczyna się od góry elementu. Oznacza to, że jeśli 50pxgo użyjesz , będzie on oddalony o „50 pikseli” od górnej krawędzi elementów. A „yvalue” to pozycja pionowa, która ma ten sam warunek.

Więc jeśli użyjesz background-position: center;twojego tła, obraz zostanie wyśrodkowany.

Ale zawsze używam tego kodu:

.yourclass {
  background: url(image.png) no-repeat center /cover;
 }

Wiem, że to takie zagmatwane, ale oznacza:

.yourclass {
  background-image: url(image.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

Wiem też, że background-sizejest to nowa właściwość, aw skompresowanym kodzie to, co jest, /coverale te kody oznaczają fillrozmiar tła i pozycjonowanie w tle pulpitu Windows.

Można zobaczyć więcej szczegółów na temat background-positionw tutaj oraz background-sizew tutaj .

Morteza Sadri
źródło
7

Jeśli obrazem tła jest arkusz sprite'ów wyrównany pionowo, możesz wyśrodkować każdy duszek w poziomie w następujący sposób:

#doit {
    background-image: url('images/pic.png'); 
    background-repeat: none;
    background-position: 50% [y position of sprite];
}

Jeśli obrazem tła jest arkusz sprite'ów wyrównany poziomo, możesz wyśrodkować każdego duszka w pionie w następujący sposób:

#doit {
    background-image: url('images/pic.png'); 
    background-repeat: none;
    background-position: [x position of sprite] 50%;
}

Jeśli Twój arkusz sprite jest zwarty lub nie próbujesz wyśrodkować obrazu tła w jednym z wyżej wymienionych scenariuszy, te rozwiązania nie mają zastosowania.

Clayton
źródło
5

To działa dla mnie:

#doit{
    background-image: url('images/pic.png');
    background-repeat: no-repeat;
    background-position: center;  
}  
Hemerson Varela
źródło
3

To działa dla mnie:

.network-connections-icon {
  background-image: url(url);
  background-size: 100%;
  width: 56px;
  height: 56px;
  margin: 0 auto;
}
Collin Adams
źródło
1
margin: 0 auto;gdzie autosprawia, że ​​jest wyśrodkowany poziomo w div Dziękuję Ci!
oyalhi
1

To działa dla mnie:

<style>
   .WidgetBody
        {   
            background: #F0F0F0;
            background-image:url('images/mini-loader.gif');
            background-position: 50% 50%;            
            background-repeat:no-repeat;            
        }
</style>        
Rodrigo Valenzuela
źródło
0

To działa dla mnie do wyrównywania obrazu do środka div.

.yourclass {
  background-image: url(image.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
sangfroid-eng
źródło