fix gasp between backgrounds of body and sidebar divs

[Trim]

The issue is the linear-gradient in the body background seems to not working really correctly with pixel dimensions (in Firefox at least): if you zoom in / out the page you'll see the body background to not always correctly update the rendering (and so you'll see a growing gasp for example).

Due to this issue, there was a gap between the backgrounds of the body and the sidebar elements. PR #354 tried to solve this by adjusting the linear-gradient pixel dimensions, but due to the bug of linear-gradient implementation, it was not working when window was resized or page zoomed.

As the linear-gradient usage in the body background was clearly already a workaround to create two vertical color stripes, we replace it with another workaround using the CSS feature which allows to define multiple background images with different size and position.

First background image is defined with the sidebar color (using linear-gradient with only one color) and the width which resolve the pixel gasp reported in #354 (which means the width should be the branding width + body border width). To be able to define a color as an image, we use again linear-gradient, but, this time it fills all the stripe with the same color, so we won't have error due to linear-gradient implementation.

Second image is defined from the first image position for the rest of the body block with the container color.

This new workaround idea comes from this StackOverflow answer which explain how to create pixel perfect horizontal stripes: https://stackoverflow.com/a/24829344

[nud]

First background image is defined with the sidebar color (using linear-gradient with only one color) and the width which resolve the pixel gasp reported in #354

The pixel alignment problem was fixed by adding no-repeat the the background: without it Firefox does not anchor the background precisely, it does it in increments of about 5px, because it assumes since the background repeats it's not a big deal, I suppose? When I added the background-size it didn't change anything in my tests.

[nud]

Well if you use two gradients why not just use two plain colours?

[Trim]

background-image CSS rule requires an image, so we can't use directly plain colours. The hack is to use linear-gradiant to create an image with just the plain color.

Due to the usage of background-image, I had to disable the background-repeat, otherwise only one of the colour is rendered everywhere.

[Trim]

The pixel alignment problem was fixed by adding no-repeat the the background: without it Firefox does not anchor the background precisely, it does it in increments of about 5px, because it assumes since the background repeats it's not a big deal, I suppose? When I added the background-size it didn't change anything in my tests.

En fait, il faut toutes les instructions ensemble pour que ça marche.

On dit d'abord que l'a 2 images pour créer le background (les images sont crées avec linear-gradient avec des couleurs simples).

Pour pouvoir afficher les 2 images, je dois supprimer le background-repeat, sinon l'une prend le dessus de l'autre.

Comme on a 2 images, il faut dire la taille d'affichage de chacune avec background-size et leur position dans le bloque background-position.

Avec tout ça, Firefox est capable de faire au pixel près les 2 bandes de couleurs verticales.

En théorie linear-gradient peut le faire lui-même (ça marche très bien avec Blink / Chrome), mais ça ne fonctionne pas bien avec Firefox et Webkit, particulièrement quand on fait des zoom in / out. Firefox a également un pas de environ 5 pixels pour avoir un rendu différent je ne sais pas non plus pourquoi.