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

Prise en charge des navigateurs plus anciens

Si la prise en charge d'un navigateur plus ancien est indispensable et que vous ne pouvez pas opter pour des arrière-plans ou des dégradés multiples, vous voudrez probablement faire quelque chose comme ceci sur une réserve. div élément :

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

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

La solution utilise un div fixe supplémentaire qui remplit la moitié de l'écran. Comme elle est fixe, elle restera en place même si vos utilisateurs font défiler l'écran. Vous devrez peut-être modifier certains z-index par la suite, pour vous assurer que vos autres éléments sont au-dessus de la division d'arrière-plan, mais cela ne devrait pas être trop complexe.

Si vous rencontrez des problèmes, assurez-vous que le reste de votre contenu a un z-index supérieur à celui de l'élément d'arrière-plan et tout devrait bien se passer.

---

Navigateurs modernes

Si les navigateurs plus récents sont votre seule préoccupation, il existe quelques 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é d'arrière-plan du corps pour obtenir divers effets.

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

Cela provoque une coupure nette à 50 % pour chaque couleur, de sorte qu'il n'y a pas de "gradient" comme le nom l'indique. Essayez d'expérimenter avec la partie "50%" du style pour voir les différents effets que vous pouvez obtenir.

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

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

Vous pouvez appliquer une couleur de fond à l'écran html puis appliquer une image d'arrière-plan à l'élément body et utiliser l'élément background-size pour la fixer à 50 % de la largeur de la page. L'effet obtenu est similaire, mais il ne peut être utilisé par rapport aux dégradés que si vous utilisez une ou deux images.

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;
}

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

---

NOTE SUPPLÉMENTAIRE : Remarquez que les deux html y body sont définis comme height: 100% dans ces derniers exemples. Cela permet de s'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 d'affichage de l'utilisateur. Sans la hauteur explicite, l'effet d'arrière-plan ne descendra que jusqu'au contenu de votre page. Il s'agit également d'une bonne pratique en général.

Answer 2

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

Answer 3

Vous pouvez faire une distinction forte au lieu d'un gradient 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%);

Answer 4

Une façon de résoudre votre problème est d'ajouter une seule ligne à la css de 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 "Run code snippet" 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>

Answer 5

Il s'agit donc d'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é postée il y a quatre ans.

J'ai résolu ce problème uniquement avec CSS, et sans aucun élément de DOM supplémentaire ! Cela signifie que les deux couleurs sont purement cela, juste des couleurs de fond d'UN ÉLÉMENT, et non la couleur de fond de deux.

J'ai utilisé un dégradé et, parce que j'ai placé les arrêts de couleur si près les uns des autres, on a l'impression que les couleurs sont distinctes et qu'elles ne se mélangent pas.

Voici le gradient en syntaxe native :

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

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

Ensuite, je force le gradient à passer à la couleur suivante dans les limites de l'intervalle. 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 !

Amusez-vous bien !