Plusieurs images d'arrière-plan CSS à la fois repeat-x

J'essaie d'obtenir plusieurs images d'arrière-plan dans un même div pour l'instant. Les deux doivent répéter-x.Plusieurs images d'arrière-plan CSS à la fois repeat-x

La première image devrait commencer au point haut gauche jusqu'à 50% de la div.

La seconde devrait commencer au milieu à l'extrémité droite de la div.

J'ai essayé les suivantes:

.myDiv { 
    background-image: url('image1.png'), url('image2.png'); 
    background-repeat: repeat-x, repeat-x; 
    background-position: left top, center top; 
    background-size: 50% 100%, 50% 100%; 
}

Mon problème est que s'affiche uniquement image1.

Source

2015-03-03 flightsearch

La 'répéter-x' jusqu'à 50%' 'sera un problème, car vous ne pouvez pas avoir un point final conditionnel (à moins avec CSS 2.1). Il continuera juste à répéter horizontalement. Malheureusement, vous aurez besoin d'être hacky avec des éléments superposés pour y parvenir. – Jack

@JackPattishall ok merci pour la clarification :(donc laisse jouer avec deux divs alors .... – flightsearch

Essayez avec cette background: url('image1.png'), url('image2.png'); au lieu de background-image:

Voici une demo in Jsfiddle

Vous pouvez voir les deux images apparaissent.

espère qu'il hepls

Source

2015-03-03 19:22:29 Devilquest

même résultat que mon essai – flightsearch

J'ai ajouté un exemple de travail – Devilquest

thx pour le violon essayé d'en faire un moi-même ... mais mon objectif est-ce qu'une image commence à gauche jusqu'à ce que le centre et la deuxième commence au centre jusqu'à la bordure droite – flightsearch

Set deux images de fond pour l'un quelconque élément comme celui-ci

background: 
 
    url(number.png) 600px 10px no-repeat, /* On top, like z-index: 4; */ 
 
    url(thingy.png) 10px 10px no-repeat, /*   like z-index: 3; */ 
 
    url(Paper-4.png);

Source

2015-03-03 19:36:40 Kumar

Merci à Devilquest. J'avais des problèmes avec "top repeat-x, bottom repeat-x" pour 2 images dans un div. Fonctionne sur Chrome, échoue sur IOS. Échangé à

background: url(); 
background-repeat: repeat-x, repeat-x; 
background-position: top , bottom;

et travaille maintenant bien sur safari, iPhones etc

Source

2016-03-29 11:47:42 Dave

Plusieurs images d'arrière-plan CSS à la fois repeat-x

Répondre

Questions connexes