L’un des autres avantages du jailbreak pour un iPhone ou iPod, c’est la possibilité (non-négligeable) de pouvoir ajouter des applications téléchargées sur Internet.
Du coup, plus besoin de passer par l’AppStore : avec une simple recherche google (nom de l’application +IPA), vous pouvez vous constituer une jolie petite bibliothèque d’application pour agrémenter votre appareil.
Les applications de ce type sont donc au format .IPA
Les concept cars permettent aux designers de se lâcher et de créer des designs de voiture différents de ce que l’on a l’habitude de croiser sur la route.
Cela donne aussi des idées pour modifier nos véhicules actuels.
Voici ma petite sélection personnelle de 5 concept cars de 2010.
On commence avec l’Audi A9 Hybrid Sports Sedan :
Citroën possède deux concept cars : la Citroen GT ressemble pour moi énormément à la Batmobile de Batman :
Il m’est arrivé plusieurs fois de ne pas pouvoir afficher correctement une image en arrière-plan, ou background image, en CSS. Et, dans bien des cas, le problème ne venait pas de l’image elle-même, mais de la manière dont la propriété background était écrite.
La syntaxe courte de background est pratique, mais elle peut vite devenir piégeuse. Entre l’URL, la position, la répétition, la taille, la couleur de secours et les options modernes, on peut facilement écrire une règle CSS qui semble logique, mais qui ne produit pas le résultat attendu.
Voici donc un mémo propre pour afficher correctement une image en arrière-plan, avec les bonnes pratiques actuelles.
Imaginons que nous voulons créer une section avec l’identifiant banner. Cette section doit afficher l’image background.png en arrière-plan.
La méthode la plus lisible consiste à utiliser les propriétés CSS longues :
#banner {
background-image: url("background.png");
background-position: center top;
background-repeat: no-repeat;
}Code language: CSS (css)C’est plus verbeux, certes. Mais c’est aussi plus clair. Et quand quelque chose ne s’affiche pas correctement, cette syntaxe facilite énormément le débogage.
On peut aussi utiliser la propriété raccourcie background, aussi appelée shorthand syntax. Elle permet de regrouper plusieurs propriétés en une seule ligne :
#banner {
background: url("background.png") center top no-repeat;
}Code language: CSS (css)Ici, on indique l’image, sa position horizontale, sa position verticale, puis son mode de répétition.
Dans cet exemple, l’image sera centrée horizontalement, alignée en haut verticalement, et ne sera pas répétée.
Cela semble trivial, mais une mauvaise combinaison de valeurs peut donner l’impression que l’image ne se charge pas. En réalité, elle peut être répétée, mal positionnée, cachée derrière une couleur, ou simplement affichée hors de la zone visible.
Une bonne image de fond devrait presque toujours être accompagnée d’une couleur de secours. Si l’image ne charge pas, si elle met du temps à arriver, ou si elle contient de la transparence, la couleur reste visible.
#banner {
background-color: #1f2937;
background-image: url("background.png");
background-position: center top;
background-repeat: no-repeat;
}Code language: CSS (css)Avec la syntaxe courte, on peut écrire :
#banner {
background: #1f2937 url("background.png") center top no-repeat;
}Code language: CSS (css)C’est propre, lisible, et cela évite les fonds blancs imprévus pendant le chargement. Ce n’est pas glamour, mais ça sauve des designs.
Par défaut, une image de fond garde sa taille naturelle. Si l’image est plus petite que son conteneur, elle peut se répéter. Si elle est trop grande, elle peut dépasser visuellement la zone utile.
La propriété background-size règle ce problème. Les deux valeurs les plus utiles sont cover et contain.
cover agrandit ou réduit l’image pour couvrir tout le conteneur. L’image garde ses proportions, mais elle peut être rognée.
#banner {
min-height: 420px;
background: #1f2937 url("background.png") center center / cover no-repeat;
}Code language: CSS (css)Le slash / est important dans la syntaxe courte. Il sépare background-position de background-size. Sans lui, la règle peut devenir invalide ou ne pas faire ce que vous pensez.
Cette syntaxe :
background: url("background.png") center center / cover no-repeat;Code language: JavaScript (javascript)équivaut grosso modo à ceci :
background-image: url("background.png");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;Code language: HTTP (http)Pour une bannière, un hero, une couverture d’article ou une grande section visuelle, cover est généralement le bon choix.
contain affiche toute l’image dans le conteneur, sans la rogner. En revanche, il peut rester des zones vides autour de l’image.
#banner {
min-height: 420px;
background: #f3f4f6 url("background.png") center center / contain no-repeat;
}Code language: CSS (css)contain convient bien pour un logo, une illustration, un schéma, ou une image qu’il ne faut surtout pas couper.
Pour une section moderne avec une image de fond propre, on peut utiliser cette base :
.hero {
min-height: clamp(320px, 55vw, 680px);
background:
#111827
url("hero.jpg")
center center / cover
no-repeat;
}Code language: CSS (css)Cette version combine plusieurs bonnes pratiques :
clamp() ;La fonction clamp() évite les hauteurs fixes trop rigides. La section reste raisonnable sur mobile, mais elle peut respirer sur grand écran.
Si du texte s’affiche au-dessus de l’image, un simple fond visuel ne suffit pas toujours. Une image lumineuse peut rendre le titre illisible. Dans ce cas, on peut superposer un dégradé et une image dans la même propriété background.
.hero {
min-height: clamp(320px, 55vw, 680px);
color: #fff;
background:
linear-gradient(
90deg,
rgba(17, 24, 39, 0.85),
rgba(17, 24, 39, 0.35)
),
url("hero.jpg") center center / cover no-repeat;
}Code language: CSS (css)Le premier arrière-plan déclaré s’affiche au-dessus du second. Le dégradé vient donc par-dessus l’image. C’est très utile pour les bannières, les titres d’articles et les couvertures de page.
On peut aussi assombrir toute l’image avec un dégradé plus simple :
.hero {
background:
linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)),
url("hero.jpg") center center / cover no-repeat;
}Code language: CSS (css)C’est souvent plus propre que de modifier l’image directement dans Photoshop, surtout si le texte ou la mise en page changent selon les pages.
Une grande image de bureau ne fonctionne pas toujours sur mobile. Elle peut être trop lourde, mal cadrée, ou rogner le sujet principal.
La méthode classique consiste à changer l’image avec une media query :
.hero {
min-height: 420px;
background: #111827 url("hero-mobile.jpg") center center / cover no-repeat;
}
@media (min-width: 768px) {
.hero {
min-height: 560px;
background-image: url("hero-desktop.jpg");
}
}Code language: CSS (css)Avec cette approche, le mobile reçoit une image plus adaptée. C’est souvent meilleur pour les performances, mais aussi pour le cadrage.
Si votre image contient un visage, un produit, ou un élément important, pensez aussi à ajuster la position :
.hero {
background-position: 65% center;
}
@media (min-width: 768px) {
.hero {
background-position: center center;
}
}Code language: CSS (css)Ce petit détail évite de couper le sujet principal sur les petits écrans. Et franchement, c’est souvent là que le design passe de “ça marche” à “c’est propre”.
La fonction CSS image-set() permet de proposer plusieurs versions d’une image au navigateur. Il peut alors choisir l’image la plus adaptée selon la densité de pixels de l’écran.
.hero {
background-image: image-set(
url("hero.avif") type("image/avif") 1x,
url("hero@2x.avif") type("image/avif") 2x,
url("hero.webp") type("image/webp") 1x,
url("hero@2x.webp") type("image/webp") 2x
);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}Code language: CSS (css)C’est une technique plus moderne, particulièrement intéressante pour les arrière-plans critiques ou très visibles.
En pratique, je conseille toutefois de garder une version simple si vous gérez déjà vos images via WordPress, un thème moderne, ou un plugin d’optimisation d’images. image-set() est puissant, mais il demande une vraie stratégie de génération des fichiers.
Quand une image de fond ne s’affiche pas, le premier réflexe consiste à vérifier le chemin indiqué dans url().
Le chemin est relatif au fichier CSS, pas à la page HTML.
Par exemple, si votre CSS se trouve ici :
/wp-content/themes/mon-theme/assets/css/style.csset votre image ici :
/wp-content/themes/mon-theme/assets/images/background.pngalors le chemin depuis le fichier CSS sera :
.hero {
background-image: url("../images/background.png");
}Code language: CSS (css)Dans WordPress, c’est une cause classique de bug, surtout quand on déplace du CSS depuis un bloc personnalisé vers un fichier CSS du thème.
Autre piège fréquent : l’image de fond est bien chargée, mais le conteneur n’a aucune hauteur. Du coup, on ne voit rien.
Ce code peut sembler correct :
.banner {
background: url("background.jpg") center / cover no-repeat;
}Code language: CSS (css)Mais si .banner ne contient rien, sa hauteur peut être égale à zéro.
Il faut donc ajouter une hauteur minimale, du padding, ou du contenu :
.banner {
min-height: 360px;
background: url("background.jpg") center / cover no-repeat;
}Code language: CSS (css)Ou, mieux encore, une hauteur fluide :
.banner {
min-height: clamp(280px, 45vw, 560px);
background: url("background.jpg") center / cover no-repeat;
}Code language: CSS (css)Une image de fond doit rester décorative. Si l’image apporte une information importante, il vaut mieux utiliser une vraie balise <img>.
Pourquoi ? Parce qu’une image CSS n’a pas d’attribut alt. Elle n’est pas décrite aux lecteurs d’écran, elle n’est pas aussi naturellement indexable, et elle ne bénéficie pas aussi facilement des mécanismes HTML modernes comme srcset, sizes, loading ou fetchpriority.
Pour une image réellement informative, cette approche est souvent meilleure :
<figure class="hero-media">
<img
src="hero.jpg"
alt="Description claire de l’image"
loading="lazy"
decoding="async"
>
</figure>Code language: JavaScript (javascript)Et côté CSS :
.hero-media {
aspect-ratio: 16 / 9;
overflow: hidden;
}
.hero-media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}Code language: CSS (css)Cette technique donne un rendu très proche d’un background-size: cover, mais avec une vraie image HTML.
Dans Gutenberg, le bloc Cover utilise déjà ce principe : une image ou une vidéo, une hauteur minimale, un alignement, un overlay, et du contenu par-dessus.
Pour une bannière simple dans WordPress, le bloc Cover est souvent préférable à une règle CSS manuelle. Il gère mieux l’interface d’édition, l’overlay, la hauteur, le texte et le responsive.
En revanche, une image de fond en CSS reste très utile pour :
En clair : pour du contenu éditorial, utilisez plutôt les blocs natifs. Pour du design système, le CSS garde toute sa place.
Voici une version solide pour une bannière moderne :
.site-banner {
min-height: clamp(320px, 52vw, 640px);
padding: clamp(2rem, 6vw, 5rem);
color: #fff;
background:
linear-gradient(
90deg,
rgba(17, 24, 39, 0.88),
rgba(17, 24, 39, 0.42)
),
url("banner-mobile.jpg") center center / cover no-repeat;
}
@media (min-width: 768px) {
.site-banner {
background-image:
linear-gradient(
90deg,
rgba(17, 24, 39, 0.88),
rgba(17, 24, 39, 0.22)
),
url("banner-desktop.jpg");
}
}Code language: CSS (css)Cette version fait plusieurs choses correctement :
cover pour remplir la zone./* Image de fond simple. */
.element {
background-image: url("image.jpg");
background-position: center;
background-repeat: no-repeat;
}
/* Image qui couvre toute la zone. */
.element {
background: url("image.jpg") center / cover no-repeat;
}
/* Image entièrement visible. */
.element {
background: url("image.jpg") center / contain no-repeat;
}
/* Image + couleur de secours. */
.element {
background: #111827 url("image.jpg") center / cover no-repeat;
}
/* Image + overlay. */
.element {
background:
linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)),
url("image.jpg") center / cover no-repeat;
}
/* Image responsive avec media query. */
.element {
background: url("image-mobile.jpg") center / cover no-repeat;
}
@media (min-width: 768px) {
.element {
background-image: url("image-desktop.jpg");
}
}Code language: CSS (css)Pour afficher correctement une image en arrière-plan, il ne suffit pas d’indiquer une URL. Il faut aussi penser à la position, à la répétition, à la taille, à la hauteur du conteneur, au responsive et à la lisibilité du contenu placé par-dessus.
Pour une bannière moderne, cette base couvre la plupart des cas :
.banner {
min-height: clamp(320px, 50vw, 640px);
background: #111827 url("banner.jpg") center / cover no-repeat;
}Code language: CSS (css)Ensuite, on ajuste selon le contexte : contain si l’image ne doit pas être rognée, un dégradé si du texte doit rester lisible, une media query si le cadrage mobile diffère, ou une vraie balise <img> si l’image porte une information importante.
Simple, efficace, et nettement moins frustrant que de passer deux heures à chercher pourquoi une image parfaitement valide refuse de s’afficher.