PUBLIC MARKS from decembre with tags css & background

I love using SVG in CSS background images but it sucks that you can't alter the fill color easily within your CSS. Here are a few ways around that. # SVG in CSS backgrounds: Using SVG in CSS backgrounds allows you to use CSS's powerful background sizing and position properties. This makes sizing SVGs much simpler because the image easily scales to the size of your element. Plus you don't have SVG cluttering up your markup. There are also some nice performance benefits over inline SVG. An SVG in a background image can be cached. Using image sprites and embedding SVG as a data URI can also improve performance.

Le but est ici de faire en sorte que l'image de fond que l'on aura placée en CSS conserve son ratio de 16/9 et prenne toute la taille du navigateur, quelle que soit la taille de ce dernier (aka fullscreen). Pratique quand on fait du responsive. Voici le code utilisé : .ratio { background: url("monimage.jpg") no-repeat; background-size: cover; width: 100vw; height: 56.25vw; } Concrètement ce que l'on fait : on donne à l'image la largeur du navigateur grâce à l'unite vw (viewport-width) on lui donne la hauteur à laquelle on a appliqué un ratio 16:9 calculé en faisant 100 * 9 / 16 de la largeur du navigateur

Equal height columns have been a need of web designers forever. If all the columns share the same background, equal height is irrelevant because you can set that background on a parent element. But if one or more columns need to have their own background, it becomes very important to the visual integrity of the design.

In this article, I'm going to guide you through a concrete problem I had to solve. Eventually, we'll see how to use percentage values in the background-position CSS property and how it solves a lot of tough issues.