wiederholen css Hintergrundbild ein Set mehrmals

Question

Gibt es eine Möglichkeit, wie oft ein Hintergrundbild mit CSS wiederholt wird?

Answer 1

nein.

Sie könnten eine absolute Breite für eine Box setzen, aber es gibt keine CSS-Option, um das Bild n mal zu wiederholen.

Answer 2

Eine hässliche Hack mehrere Male -statically- gleichen Bild einfügen könnte (mit multiple backgrounds):

Z.B. Um es zu wiederholen ein Bild horizontal (80x80) dreimal:

background-image: url('bg_texture.png'), 
        url('bg_texture.png'), 
        url('bg_texture.png'); 
background-repeat: no-repeat, 
        no-repeat, 
        no-repeat; 
background-position: 0 top, 
        80px top, 
        160px top; 

Vorsicht: nicht funktioniert auf IE unter 9 Version (source).

Answer 3

Sie können ein wenig jQuery mit CSS kombinieren, um zu erreichen, was Sie wollen.

Angenommen, Sie möchten das Bild foo.png 3 mal horizontal und 2 mal vertikal anzeigen.

CSS:

body { 
    background: url('foo.png'); 
} 

jQuery:

$(document).ready(function() { 
    $('body').css('background-size', $(window).width()/3 + 'px ' + $(window).height()/2 + 'px'); 
}); 

Darüber hinaus können Sie den gleichen Code innerhalb von $ (Fenster) .resize() fügen eine dynamische Antwort zu erhalten.

Answer 4

Ich bin mir nicht sicher, was ursprünglich diese Frage motiviert hat, aber ich habe nach einem Weg gesucht, um sicherzustellen, dass nur eine ganzzahlige Anzahl von Kopien eines Hintergrundbilds erscheint (z. B. nicht das letzte Mitglied einer Hintergrundbilder.) Dies kann über die background-repeat: space Eigenschaft erreicht werden.