CSS: Définit une couleur d’arrière-plan correspondant à 50% de la largeur de la fenêtre

Essayer d’obtenir un arrière-plan sur une page qui est “divisée en deux”; deux couleurs sur les côtés opposés (apparemment en définissant une background-color par défaut sur la balise body , puis en appliquant une autre sur une div qui s’étend sur toute la largeur de la fenêtre).

J’ai trouvé une solution mais malheureusement la propriété background-size ne fonctionne pas dans IE7 / 8, ce qui est un must pour ce projet –

 body { background: #fff; } #wrapper { background: url(1px.png) repeat-y; background-size: 50% auto; width: 100%; } 

Comme il ne s’agit que de couleurs unies, il existe peut-être un moyen d’utiliser uniquement la propriété de background-color normale?

    Ancien support du navigateur

    Si la prise en charge de navigateurs plus anciens est un must, vous ne pouvez donc pas faire quelque chose comme ça sur un élément de rechange:

     #background { position: fixed; top: 0; left: 0; width: 50%; height: 100%; background-color: pink; } 

    Exemple: http://jsfiddle.net/PLfLW/1704/

    La solution utilise un div supplémentaire fixe qui remplit la moitié de l’écran. Comme il est fixe, il restra en place même lorsque vos utilisateurs font défiler. Vous devrez peut-être manipuler des index z plus tard pour vous assurer que vos autres éléments sont au-dessus du div en arrière-plan, mais cela ne devrait pas être trop complexe.

    Si vous avez des problèmes, assurez-vous que le rest de votre contenu a un index z supérieur à l’élément d’arrière-plan et que vous devriez être prêt à partir.


    Navigateurs modernes

    Si les navigateurs les plus récents sont votre seule préoccupation, vous pouvez utiliser deux autres méthodes:

    Gradient linéaire:

    C’est certainement la solution la plus simple. Vous pouvez utiliser un dégradé linéaire dans la propriété d’arrière-plan du corps pour une variété d’effets.

     body { height: 100%; background: linear-gradient(90deg, #FFC0CB 50%, #00FFFF 50%); } 

    Cela provoque une coupure dure à 50% pour chaque couleur, il n’y a donc pas de “dégradé” comme son nom l’indique. Essayez d’expérimenter le morceau “50%” du style pour voir les différents effets possibles.

    Exemple: http://jsfiddle.net/v14m59pq/2/

    Arrière-plans multiples avec taille d’arrière-plan:

    Vous pouvez appliquer une couleur d’arrière-plan à l’élément html , puis appliquer une image d’arrière-plan à l’élément body et utiliser la propriété background-size pour la définir à 50% de la largeur de la page. Cela se traduit par un effet similaire, mais ne serait réellement utilisé que sur des dégradés si vous utilisez une image ou deux.

     html { height: 100%; background-color: cyan; } body { height: 100%; background-image: url('http://i.imgur.com/9HMnxKs.png'); background-repeat: repeat-y; background-size: 50% auto; } 

    Exemple: http://jsfiddle.net/6vhshyxg/2/


    REMARQUE SUPPLÉMENTAIRE: Notez que les éléments html et body sont définis sur height: 100% dans les derniers exemples. Ceci pour vous assurer que même si votre contenu est plus petit que la page, l’arrière-plan aura au moins la hauteur de la fenêtre de l’utilisateur. Sans la hauteur explicite, l’effet d’arrière-plan n’atteint que le contenu de votre page. C’est aussi juste une bonne pratique en général.

    Solution simple pour obtenir un fond “divisé en deux”:

     background: linear-gradient(to left, #ff0000 50%, #0000ff 50%); 

    Vous pouvez également utiliser les degrés comme direction

     background: linear-gradient(80deg, #ff0000 50%, #0000ff 50%); 

    Cela devrait fonctionner avec des css purs.

     background: -webkit-gradient(linear, left top, right top, color-stop(50%,#141414), color-stop(50%,#333), color-stop(0%,#888)); 

    testé dans Chrome uniquement.

    Dans un projet antérieur qui devait prendre en charge IE8 + et ceci avec une image encodée au format data-url.

    L’image était 2800x1px, la moitié de l’image blanche et à moitié transparente. A bien fonctionné.

     body { /* 50% right white */ background: red url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACvAAAAABAQAAAAAqT0YHAAAAAnRSTlMAAHaTzTgAAAAOSURBVHgBYxhi4P/QAgDwrK5SDPAOUwAAAABJRU5ErkJggg==) center top repeat-y; /* 50% left white */ background: red url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACvAAAAABAQAAAAAqT0YHAAAAAnRSTlMAAHaTzTgAAAAPSURBVHgBY/g/tADD0AIAIROuUgYu7kEAAAAASUVORK5CYII=) center top repeat-y; } 

    Vous pouvez le voir fonctionner ici JsFiddle . J’espère que ça peut aider quelqu’un;)

    Donc, c’est une question terriblement ancienne qui a déjà une réponse acceptée, mais je pense que cette réponse aurait été choisie si elle avait été publiée il y a quatre ans.

    Je l’ai résolu uniquement avec CSS, et sans éléments supplémentaires DOM! Cela signifie que les deux couleurs sont purement cela, juste les couleurs de fond de ONE ELEMENT, pas la couleur de fond de deux.

    J’ai utilisé un dégradé et, comme la couleur s’arrête si étroitement, les couleurs semblent distinctes et ne se mélangent pas.

    Voici le dégradé en syntaxe native:

     background: repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%); 

    La couleur #74ABDD commence à 0% et est toujours #74ABDD à 49.9% .

    Ensuite, je force le dégradé à passer à ma couleur suivante dans la limite de 0.2% de la hauteur des éléments, créant ainsi une ligne qui semble très solide entre les deux couleurs.

    Voici le résultat:

    Couleur d'arrière-plan fractionné

    Et voici mon JSFiddle!

    S’amuser!

    Vous pouvez faire une distinction difficile au lieu du dégradé linéaire en mettant la deuxième couleur à 0%

    Par exemple,

    Gradient – background: linear-gradient(80deg, #ff0000 20%, #0000ff 80%);

    Distinction difficile – background: linear-gradient(80deg, #ff0000 20%, #0000ff 0%);background: linear-gradient(80deg, #ff0000 20%, #0000ff 0%);

    J’ai utilisé :after et cela fonctionne dans tous les principaux navigateurs. s’il vous plaît vérifier le lien. il suffit de faire attention à l’index z car après avoir la position absolue.

     
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ulsortingcies nec, pellentesque eu, pretium quis, sem.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ulsortingcies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec,
    ` css .splitBg{ background-color:#666; position:relative; overflow:hidden; } .splitBg:after{ width:50%; position:absolute; right:0; top:0; content:""; display:block; height:100%; background-color:#06F; z-index:1; }

    lien de violon

    Vous pouvez utiliser le pseudo-sélecteur :after pour y parvenir, même si je ne suis pas certain de la compatibilité descendante de ce sélecteur.

     body { background: #000000 } body:after { content:''; position: fixed; height: 100%; width: 50%; left: 50%; background: #116699 } 

    Je l’ai utilisé pour avoir deux dégradés différents sur un fond de page.

    L’option la plus à l’épreuve et la plus correcte serait d’utiliser un pseudo-élément à position fixe ( :after ou :before ). Avec cette technique, n’oubliez pas de définir z-index sur les éléments à l’intérieur du conteneur. De plus, ce content:"" règle pour pseudo-élément est nécessaire, sinon il ne sera pas rendu.

     #container {...} #content:before { content:""; background-color: #999; height: 100%; left: 0px; position: fixed; top: 0px; width: 50%; z-index: 1; } #content * { position: relative; z-index:2; } 

    Exemple en direct: https://jsfiddle.net/xraymutation/pwz7t6we/16/

    Utilisez sur votre image bg

    Division verticale

     background-size: 50% 100% 

    Séparation horizontale

     background-size: 100% 50% 

    Exemple

     .class { background-image: url(""); background-color: #fff; background-repeat: no-repeat; background-size: 50% 100%; } 

    Une des manières d’implémenter votre problème pour saisir une seule ligne dans votre div:

     background-image: linear-gradient(90deg, black 50%, blue 50%); 

    Voici un code de démonstration et plus d’options (horizontales, diagonales, etc.), vous pouvez cliquer sur “Exécuter l’extrait de code” pour le voir en direct.

     .abWhiteAndBlack { background-image: linear-gradient(90deg, black 50%, blue 50%); height: 300px; width: 300px; margin-bottom: 80px; } .abWhiteAndBlack2 { background-image: linear-gradient(180deg, black 50%, blue 50%); height: 300px; width: 300px; margin-bottom: 80px; } .abWhiteAndBlack3 { background-image: linear-gradient(45deg, black 50%, blue 50%); height: 300px; width: 300px; margin-bottom: 80px; } 
     Vertical: 
    Horizonal:
    Diagonal:

    Ceci est un exemple qui fonctionnera sur la plupart des navigateurs.
    Fondamentalement, vous utilisez deux couleurs de fond, la première commençant à 0% et se terminant à 50% et la seconde à partir de 51% et se terminant à 100%

    J’utilise l’orientation horizontale:

     background: #000000; background: -moz-linear-gradient(left, #000000 0%, #000000 50%, #ffffff 51%, #ffffff 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,#000000), color-stop(50%,#000000), color-stop(51%,#ffffff), color-stop(100%,#ffffff)); background: -webkit-linear-gradient(left, #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%); background: -o-linear-gradient(left, #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%); background: -ms-linear-gradient(left, #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%); background: linear-gradient(to right, #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=1 ); 

    Pour différents ajustements, vous pouvez utiliser http://www.colorzilla.com/gradient-editor/