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 fait en définissant une valeur par défaut background-colorsur l' bodyétiquette, puis en en appliquant une autre sur une divqui s'étend sur toute la largeur de la fenêtre).

J'ai trouvé une solution mais malheureusement, la background-sizepropriété 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%;
}

Puisqu'il s'agit simplement de couleurs unies, il existe peut-être un moyen d'utiliser uniquement la background-colorpropriété régulière ?

Prise en charge des anciens navigateurs

Si la prise en charge d'anciens navigateurs est indispensable, de sorte que vous ne pouvez pas utiliser plusieurs arrière-plans ou dégradés, vous voudrez probablement faire quelque chose comme ça sur un divé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 fixe supplémentaire qui remplit la moitié de l'écran. Comme il est corrigé, il restera en place même lorsque vos utilisateurs font défiler. Vous devrez peut-être manipuler certains z-index plus tard, pour vous assurer que vos autres éléments sont au-dessus du div d'arrière-plan, mais cela ne devrait pas être trop complexe.

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

Navigateurs modernes

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

Gradient linéaire:

C'est certainement la solution la plus simple. Vous pouvez utiliser un dégradé linéaire dans la propriété background du corps pour une variété d'effets.

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

Cela provoque une coupure ferme à 50% pour chaque couleur, il n'y a donc pas de "dégradé" comme son nom l'indique. Essayez de tester l'élément "50%" du style pour voir les différents effets que vous pouvez obtenir.

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

Plusieurs arrière-plans avec la taille de l'arrière-plan:

Vous pouvez appliquer une couleur d'arrière-plan à l' htmlélément, puis appliquer une image d'arrière-plan à l' bodyélément et utiliser la background-sizepropriété pour le définir à 50% de la largeur de la page. Cela se traduit par un effet similaire, mais ne serait vraiment 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 htmlet bodysont définis sur height: 100%les derniers exemples. Ceci permet de s'assurer que même si votre contenu est plus petit que la page, l'arrière-plan sera au moins la hauteur de la fenêtre de l'utilisateur. Sans la hauteur explicite, l'effet d'arrière-plan ne descendra que jusqu'au contenu de votre page. C'est aussi juste une bonne pratique en général.

Solution simple pour obtenir un arrière-plan "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%);

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

Par exemple,

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

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

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

J'ai résolu cela uniquement avec CSS, et sans ÉLÉMENTS DOM SUPPLÉMENTAIRES! Cela signifie que les deux couleurs sont purement cela, juste des couleurs d'arrière-plan d'UN ELEMENT, pas la couleur d'arrière-plan de deux.

J'ai utilisé un dégradé et, parce que j'ai placé les couleurs d'arrêt si étroitement ensemble, il semble que les couleurs sont distinctes et qu'elles 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%);

Couleur #74ABDDcommence à 0%et est toujours #74ABDDà 49.9%.

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

Voici le résultat:

Et voici mon JSFiddle!

S'amuser!

cela devrait fonctionner avec du css pur.

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 précédent qui devait prendre en charge IE8 + et j'ai réalisé cela en utilisant une image encodée au format data-url.

L'image faisait 2800x1px, la moitié de l'image était blanche et la moitié transparente. A plutôt 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 cela peut aider quelqu'un;)

Je l'ai utilisé :afteret cela fonctionne dans tous les principaux navigateurs. veuillez vérifier le lien. juste besoin de faire attention au z-index comme après avoir la position absolue.

<div class="splitBg">
    <div style="max-width:960px; margin:0 auto; padding:0 15px; box-sizing:border-box;">
        <div style="float:left; width:50%; position:relative; z-index:10;">
            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, ultricies nec, pellentesque eu, pretium quis, sem.
        </div>
        <div style="float:left; width:50%; position:relative; z-index:10;">
            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, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, 
        </div>
        <div style="clear:both;"></div>
    </div>
</div>`
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 violon

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

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

J'ai utilisé ceci pour avoir deux dégradés différents sur un fond de page.

Utiliser sur votre image bg

Division verticale

background-size: 50% 100%

Division horizontale

background-size: 100% 50%

Exemple

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

Une des façons 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 (horizontal, diagonal, 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:

  <div class="abWhiteAndBlack">
  </div>


Horizonal:

  <div class="abWhiteAndBlack2">
    
  </div>


Diagonal:

  <div class="abWhiteAndBlack3">
    
  </div>

L'option la plus sûre et la plus correcte du point de vue sémantique serait d'utiliser un pseudo-élément à position fixe ( ::afterou ::before). En utilisant cette technique, n'oubliez pas de définir z-indexles éléments à l'intérieur du conteneur. Notez également que cette content:""règle pour le pseudo-élément est nécessaire, sinon elle ne sera pas rendue.

#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/

Ceci est un exemple qui fonctionnera sur la plupart des navigateurs.
Fondamentalement, vous utilisez deux couleurs de fond, la première à partir de 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/

si vous souhaitez utiliser linear-gradientavec 50% de hauteur:

background: linear-gradient(to bottom, red 0%, blue 100%) no-repeat;
background-size: calc(100%) calc(50%);
background-position: top;