web-dev-qa-db-fra.com

Retourner verticalement une image de fond à chaque fois qu'elle se répète

Je cherche une astuce qui répète mon image d'arrière-plan verticalement, mais chaque fois que l'image est répétée, je veux la retourner verticalement.

J'ai essayé toutes les choses dans mon esprit avec répétition, mais je n'ai pas trouvé de solution, même en cherchant dans Google.

Exemple:

Background Image de fond droite

Background flipped vertically Image d'arrière-plan inversée lors de la répétition

Background flipped vertically again Et puis retourné à droite

Il existe une méthode pour obtenir cette position?

J'accepterai la solution dans JScript (et sa bibliothèque) uniquement s'il n'y a pas de solution avec du css pur.

Merci à tous!

javascriptcsscss3css-positionbackground-position
12
rkpasia

Cela ne peut pas être fait avec CSS3 standard car il n'y a pas de propriétés CSS3 pour faire pivoter une image d'arrière-plan.

Référence: http://www.w3.org/TR/css3-background

Comme suggéré, combinez les deux motifs en une seule image, beaucoup plus simple et qui fonctionnera toujours.

5
Marc Audet

D'autres réponses suggèrent de dupliquer et de fusionner l'image de fond. Cela pourrait ajouter des mégaoctets supplémentaires à télécharger, en particulier pour les grandes images. Cependant, dans le cas de grandes images, il peut être suffisant de les mosaïque autant de fois que votre contenu nécessite une couverture. Remarque: Cette méthode utilise les transformations 2D 2D CSS, qui sont actuellement 93% supported . Dans les navigateurs qui ne sont pas pris en charge, les transformations seraient ignorées, ce qui peut ne pas avoir d'importance en fonction de la conception.

http://jsfiddle.net/skibulk/6hxeg9cu/

.wrap1 {
    transform: scaleY(-1);
    background: url(http://i.stack.imgur.com/I4hlZ.png) left bottom;
}

.wrap2 {
    transform: scaleY(-1);
    background:
        url(http://i.stack.imgur.com/I4hlZ.png) repeat-x left top,
        url(http://i.stack.imgur.com/I4hlZ.png) repeat-x left 500px;
}

Fondamentalement, j'utilise plusieurs arrière-plans répétés horizontalement et décalés verticalement. Puis j'ai réfléchi le conteneur. La limitation est que les arrière-plans ne se répètent pas éternellement. Donc, si vous ne vous attendez pas à ce que votre contenu soit poussé loin en bas de la page, c'est une option.

3
skibulk

Je voudrais charger l'image d'arrière-plan comme si

<style>
body{
    background-image:url('mybackground');
    background-repeat:no-repeat;
}
</style>

Background

Comme l'image a déjà été chargée, nous pouvons faire un peu de JavaScript sans que le navigateur ne fasse beaucoup de travail supplémentaire. nous pouvons vérifier si la hauteur de l'image remplit toute la fenêtre.

<script>
var el      =  $('body')[0];
var src     =  $(el).css('background-image').slice(4, -1);
var img     =  new Image();

checkHeight =  function(){    
    if(img.height < window.innerHeight){
       repeatBg();     
    }
}
img.onload  =  checkHeight();
img.src = src;
</script>

Si l’arrière-plan de l’image ne remplit pas toute la hauteur de la fenêtre, il est nécessaire de répéter/inverser cet arrière-plan immédiatement (cela augmentera le temps de chargement); sinon, des écouteurs d'événements peuvent être utilisés pour déclencher la vérification ultérieurement.
La fonction suivante dessine l'image sur l'élément canvas et crée un dataURL. L'argument background-image src est mis à jour avec la nouvelle dataURL et repeat-background passe de no-repeat à repeat-y (verticalement);
les écouteurs d’événements sont alors supprimés afin que la fonction ne soit plus appelée.

<canvas style="display:none" id="canvas"></canvas>


<script>

repeatBg = function(){  
    var canvas = $('#canvas')[0];
    var ctx = canvas.getContext("2d");
    canvas.width = img.width;
    canvas.height = img.height *2 ;
    ctx.drawImage(img,0,0);
    ctx.scale(1, -1);
    ctx.translate(0, -img.height);
    ctx.drawImage(img, 0, -img.height, img.width, img.height);
    var dataURL = canvas.toDataURL();
    $(el).css({
        'background-image' : 'url('+dataURL+')',
        'background-repeat' : 'repeat-y'
    });    
    $(window).off('load, scroll, resize', checkHeight);        
}
$(window).on('load, scroll, resize', checkHeight);



</script>

Et hop

flipped

http://jsfiddle.net/dtjones1988/y49rvu73/6/

1
TarranJones

Une solution purement css n'est pas possible imo.

Cela dépend de votre image.

S'il s'agit d'une statique sur laquelle vous utilisez pour décorer la page, il est préférable de la modifier en la rendant deux fois plus grande, en ajoutant une copie retournée à la partie inférieure et en l'utilisant directement via css standard.

S'il s'agit d'une image dynamique, vous pouvez toujours générer une nouvelle image (originale + retournée) sous la forme data url via js et l'utiliser sur votre élément.

Sinon, la solution serait de dupliquer les divs, ce qui est toujours gênant ...

1
Mabedan