[Votre avis] <img> ou background-image ?

Bonsoir à tous, chers alsacréationautes,

Je suis en train d'intégrer une maquette pour un projet, et vu sa "complexité" en terme de mise en page, j'hésite entre deux solutions pour mes images... Voici la maquette (les rectangles gris c'est pour cacher la marque, évidemment) :

http://img98.xooimage.com/files/2/9/5/screenshot-42c5b1e.png

La partie qui me turlupine concerne les visuels des casques, qui vous l'aurez compris, sont un réel plaisir à intégrer (et je vous parle même pas de responsive design)...

J'ai commencé à faire ça avec des balises <img> en jonglant avec des float et absolute, mais vu que j'ai plusieurs sections comme celle-ci, ça devient vite le gros bordel, sans compter que ça bouge pas mal au resize :s

Du coup, je me disais que je pouvais peut-être passer ça en background CSS ? En général, j'utilise <img> pour les images de contenu et background-image pour les images d'interface. Là, on est un peu entre les deux d'après moi, alors est-ce que ce serait une erreur d'utiliser un background CSS ?
Et si je le fait, vaut mieux que je mette plusieurs background-image superposés ou alors un seul sur toute la largeur ?

Merci d'avance pour votre aide dans ce moment de doute avec moi-même
Modifié par ClementParis (17 Dec 2013 - 15:21)

Bonsoir,

Un background-image, sans hésiter! Un pour le coin gauche supérieur et un autre pour la droite.
Modifié par Tony Monast (16 Dec 2013 - 23:22)

C'est effectivement ce qui me paraît le plus pertinent après y avoir bien réfléchit, merci beaucoup

Bonjour,

Je suis toujours dans ma problématique d'images. Le positionnement en background-image fonctionne bien, par contre, je me demandais, s'il était possible de positionner les background-image de façon à ce qu'ils ne soient pas dépendants de la taille du navigateur ?

Ce que je veux dire par là, c'est que si vous regarder l'aperçu dans le premier post, lorsqu'on à un navigateur moins large, le casque de droite passe sous le texte qui devient alors illisible... Existe-t-il un moyen de faire en sorte qu'il reste en place, quitte à ce qu'il dépasse en dehors ? En gros, faire un genre d'overflow: hidden; sur un background ?

Merci d'avance pour votre aide
Modifié par ClementParis (17 Dec 2013 - 15:25)

Bonjour,

les background-images peuvent être positionné en relatif (50% 50%), à l'aide de mots-clés (top, left, right, etc.) qui représentent eux-mêmes des positionnements relatifs, et finalement en absolu, en pixels, qui représentent la distance depuis le point en haut à gauche de l'élément.

Si le design est fixe, positionner en pixels aura l'effet escompté, seulement lorsque l'on aggrandira la taille du navigateur, il y aura un espace blanc à droite de l'image. Pour éviter cela il faudrait soit:

- Utiliser l'image complète, non coupée à droite.
- Utiliser les media-queries. L'image est collée à droite, et à partir d'une certaine largeur (qui correspond à celle de la planche ci-dessus), elle passe en fixe.

Si le design est fluide, c'est plus complexe…
Modifié par kustolovic (17 Dec 2013 - 16:00)

Sur ce site on recherche pas à faire du fluide ou du responsive. J'ai intégré le site, et sur mon écran Full HD ça passe très bien, par contre avec une résolution plus faible on voit parfois des superpositions texte/image.

Donc je vais jongler entre pixels et absolus, comme vous me l'avez proposé, ça me paraît être une bonne alternative.

Merci !