CSS : Définissez une couleur d'arrière-plan qui correspond à 50 % de la largeur de la fenêtre.

Question

J'essaie d'obtenir un arrière-plan sur une page qui est "divisée en deux", c'est-à-dire deux couleurs sur des côtés opposés (ce qui semble être le cas en définissant une valeur par défaut). background-color sur le body puis en appliquer une autre sur une balise div qui s'étend sur toute la largeur de la fenêtre).

J'ai trouvé une solution mais, malheureusement, la background-size ne fonctionne pas dans IE7/8, ce qui est indispensable pour ce projet.

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

Puisqu'il ne s'agit que de couleurs unies, il y a peut-être un moyen d'utiliser uniquement la fonction ordinaire background-color la propriété ?

Answer 1

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.

Answer 2

Dans un projet antérieur qui devait prendre en charge IE8+, j'y suis parvenu en utilisant une image encodée au format data-url.

L'image était de 2800x1px, la moitié de l'image était blanche et l'autre moitié transparente. Ça a plutôt bien marché.

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 pourra aider quelqu'un ;)

Answer 3

J'ai utilisé :after et cela fonctionne dans tous les principaux navigateurs. veuillez vérifier le lien. il faut juste faire attention au z-index car after a une 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 vers le violon

Answer 4

Vous pourriez utiliser le :after pour y parvenir, bien que je ne sois pas certain de la rétrocompatibilité 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 le fond d'une page.

Answer 5

Si vous voulez utiliser linear-gradient avec 50% de la hauteur :

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