Créer un effet type Cover en CSS

 

Comment créer un effet Cover en CSS ?

L'utilisation de la propriété "background-attachment" permet de fixer l'image dans sa zone de contenu (une ligne).

Pré-requis

Thème Smart uniquement

Ce tutoriel s'adresse uniquement aux utilisateurs du thème Smart d'e-monsite. Les thèmes Bootstrap (tout autre famille de thèmes proposée actuellement sur e-monsite) ne permettent pas de réaliser ces mises en forme, sauf en modifiant au préalable plusieurs propriétés sur la largeur des contenus.

Le choix de l'image

Il est préférable bien entendu de choisir une image ayant une orientation horizontale - panomarique/paysage - pour placer une image de fond sur une ligne de contenu. Aux dimensions de 1920px de largeur sur ce que vous souhaitez en hauteur.
Attention toutefois, une image trop haute sera rognée lors de l'affichage.

Je rappelle que l'image sera un fond, il n'est donc pas possible de l'agrandir au clic ou de modifier sa taille une fois téléchargée (ce serait possible de la redimensionner mais il est vivement conseillé de placer une image aux bonnes dimensions).

Le traitement de l'image

Il est recommandé d'optimiser les poids des images. Une image de 1920px par 500px de hauteur par exemple peut être très lourde. L'utilisation d'un outil en ligne comme Tinypng est conseillé si votre logiciel de retouche d'images ne permet pas de faire un enregistrement de l'image pour le web.

Les images utilisées pour ce tutoriel sont des images libres de droit.
Crédits photo : Ryan McGuire.
gratisography.com

Connaissances en HTML et CSS

Des notions de CSS et HTML peuvent être nécessaires pour la personnalisation des codes fournis.

Si vous avez déjà une image à 1920px de largeur et une hauteur pas trop importante, optimisée pour un affichage web, téléchargez-la dans l'espace de stockage de votre manager et passez directement à l'étape suivante.


Redimensionner l'image et optimiser son poids

Redimensionner l'image

Prenons par exemple le site gratisography.com, les images sont proposées dans un format presque carré, en tout cas pas assez orientées à l'horizontal pour ce type d'utilisation.
Toutefois, si l'on redimensionne l'image après son télépchargement, en la rognant un peu en bas et en haut, l'utilisation en image de fond est possible. Tous les logiciels de retouche d'images sont utilisables (Photoshop, Photofiltre, Gimp, Paint, etc.).

Nous verrons que ce n'est pas parfait comme format. D'autres sites d'images gratuites permettent de rechercher des images par format (orientation verticale ou horizontale).
Plus d'informations sur ce le blog d'e-monsite : Des images libres de droit pour vos sites web.

Voici comment procéder pour optimiser les dimensions de l'image avec Paint.

 

Tutoriel background attachment retouche image101
Retouche d'image avec Paint - Illustration
Redimensionner une image sur paint capture 2
Redimensionner une image sur Paint - Capture 1

Pour rogner l'image sur Paint, utilisez le petit carré blanc placé au centre sous l'image et glissez-le vers le haut. Une fois la zone à rogner supprimée, il faudra retourner l'image à 180° pour refaire de la même manière la partie haute de l'image.

Pour visualiser le carré, il faut dézoomer à moins de 25% si l'image est très haute. Ici un zoom de 12.5% a été utilisé pour cet exemple.

Voici une vidéo d'une cinquantaine de secondes pour visualiser la rotation de l'image et les actions pour rogner l'image et pour la redimensionner.
Réalisé sans effets sonores ou voix.

Enregistrez ensuite l'image en jpeg ou en png.

Une fois l'image enregistrée, optimisez son poids avec un outil type Tinypng (service en ligne gratuit) : https://tinypng.com/

Téléchargez ensuite l'image dans l'espace de stockage de votre manager.

×