web-dev-qa-db-fra.com

répéter css image de fond

existe-t-il un moyen de définir le nombre de répétitions d'une image d'arrière-plan avec css?

cssrepeat
23
Moudy

Un bidouillage laid peut être insérer plusieurs fois - de manière systématique - la même image (avec plusieurs arrière-plans ):

Par exemple. Pour répéter une image horizontalement (80x80) trois fois:

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;

Attention: ne fonctionne pas sur IE sous la version 9 ( source ).

26
franzlorenzon

non.

vous pouvez définir une largeur absolue pour une boîte, mais il n’existe pas d’option css permettant de répéter l’image n fois.

8
jantimon

Vous pouvez combiner un peu de jQuery avec CSS pour obtenir ce que vous voulez.

Disons que vous voulez afficher l'image foo.png 3 fois horizontalement et 2 fois verticalement.

CSS:

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

jQuery:

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

En outre, vous pouvez coller le même code dans $ (window) .resize () pour obtenir une réponse dynamique.

2
Ryan Dsouza

Comme @gcbenison a répété strictement le nombre d'images x d'une image, vous pouvez utiliser la propriété background-repeat: space ou, de la même manière, le background-position: round et combiner l'un de ces éléments avec background-size pour garantir l'affichage d'un nombre défini de répétitions pour une image d'arrière-plan. et puis peut-être ajuster la taille de l'emballage pour accueillir.

space et repeat répéteront une image d'arrière-plan à l'infini tant que l'image entière pourra être montrée, bien que pour tout reste space ajoutera un espace entre les images tandis que round redimensionnera les images. En termes simples, si l’image de fond correspond à 3,342 fois verticalement, space et round afficheront l’image 3 fois, space ajoutant un intervalle entre chaque image répétée et round redimensionnant les images (le cas échéant) pour le combler. .

Si vous vouliez ainsi répéter une image 5 fois, chaque image mesurant 20 pixels de large et espacées de 5 pixel, vous pouvez simplement le faire:

.star-rating {
    width: 120px;
    background-image: url('example.jpg');
    background-repeat: space;
    background-size: 20px auto;
    }

https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat

L'autre option (si vous ne pouvez pas définir la largeur) consiste à utiliser la solution de @franzlorenzon et à déclarer simplement le nombre x d'arrière-plan à l'aide de la propriété CSS à plusieurs arrière-plans.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds

De plus, vous pouvez enregistrer plusieurs lignes en utilisant SASS en créant une boucle @for comme ceci:

$image_count: 5;
$image_url: 'url(star.svg)';
$image_position: '0';

@for $i from 1 through ($image_count - 1) {
    $image_url: #{ $image_url+', '+$image_url };
    $image_position: #{ $image_position+', '+($i * (100% / $image_count)) };
}

.star-rating {
    background-image: $image_url;
    background-position: $image_position;
    background-size: 20px;
    background-repeat: no-repeat;
}

Cela générera alors les images d'arrière-plan, toutes régulièrement espacées. De plus, n'hésitez pas à changer ($i * (100% / $image_count)) en ($i * VALUE) pour un espacement fixe.

0
Oliver

Je ne sais pas ce qui a motivé cette question à l'origine, mais je l'ai trouvée en cherchant un moyen de s'assurer que seul un nombre intégral de copies d'une image d'arrière-plan apparaît (c.-à-d. Ne pas recadrer le dernier membre d'un ensemble répété d'images d'arrière-plan.) Cela peut être réalisé via la propriété background-repeat: space.

0
gcbenison