Ajuster la taille de l'image du forum aux différents supports

Bonjour,

Je suis en train de faire un forum (forumactif) pour mon clan de coc mais j'ai un problème c'est que je n'arrive pas à dimensionner l'image afin qu'elle apparaisse nickel sur différents appareils (pc, tablette, tel)
J'ai essayé différent css mais rien n'y a fait...
Je vais être honnête je n'y connais pas grand chose dans ce domaine mais je ne demande qu'à apprendre

Voici le lien du forum
http://overlord.forumactif.fr/

Comme vous voyez l'image n'est pas cadrée.
J'ai réussi à la cadrer avec un code css mais quand je suis allé sur mon portable et ma tablette, l'image n'était plus cadrée...

Merci d'avance de votre aide

Le site actuel n a pas de media query ( pas detecté par chrome ?! ) mais est adaptifs car utilise margin auto et % comme unité de mesure mais en se basant sur un seule image de fond .
Un site responsive affiche affiche des images pour chaque width de votre design ( on met des espaces a gauche et a droite dont la taille diminue en réduisant la taille width du browser ) . A chaque breakpoint il faut charger les nouvelles images en utilisant les CSS Mediaqueries qui remplacent les images actuellement sur le site et redéini les unité de mesure ( absolu px ...pt ou relative au parents % ) !! Mais il faut aussi gérer les scripts ( certains inactifs d autre actifs ...) . chaque breakpoint doit avoir un fichier psd spécifique si le design utilise des rasters ( change le design ou recentre le motif du raster ) opposé au design vectoriel ( SVG CSS text ) .

si le with du browser est supérieur a 1440x900 alors le motif de l image de fond se repete horizontalement et verticalement .
id="wrap"
margin: 0 auto;
min-width: 768px;

body
background-image: url(http://i18.servimg.com/u/f18/19/26/20/55/clash-15.jpg);
1440x 900px

Certains site utilise une image big big mais le contenu de l image est abstraite et le centre de l image est centé sur le centre de la partie visible du browser. Cette idée est reprise par le coe qui suit .

Cordialement
impossible d uploader une image en utilisant Firefox 38.0.5 sur alsa creation !!! ( bizarre ..? reproductif ? give up )
Modifié par 75lionel (01 Jul 2015 - 23:43)

le code ci dessous dans le selecteur body semble fonctionner
background-attachment: fixed;
background-clip: border-box;
background-color: #F9F9F9;
background-origin: padding-box;
background-position: 0 0;
background-repeat: no-repeat;
background-size: cover;

Avec ce code ,la partie original de l image de droite est "crop" =caché=non visible lorsque la taille du browser diminue . A vous de redéfinir une image ou le sujet est centré selon la taille du browser .
Il faut aussi redefinir le width de id=wrap dans le mediaquery ( a verifier) et voir si les max-width min-width ne pose pas de problèmes ....

Pour quelqu un qui ne connait rien ..... pouvez vous me dire d ou provient le code source css du layout de votre site ? DRY trouver un forum et voyez comment est structurer le code css de ce site et l inspiration viendra !! ( inspiration et copie ou est la différence ? , le layout peut il être déposé à un organisme de type INPI ou SACEM ? )

cordialement
Modifié par 75lionel (01 Jul 2015 - 23:53)

Bonsoir pegase14 et 75lionel,

Je me permet juste de résumer tes propos 75lionel, j'ai l'impression que tu t'es un poil emballé avec toutes tes histoires de responsive et de media queries...

@pegase14 : Tu parles bien de ton image de fond ?
http://i18.servimg.com/u/f18/19/26/20/55/clash-15.jpg

Dans ce cas, comme l'a dit 75lionel, il faut juste rajouter une propriété CSS sur le body (l'élément qui contient l'image de fond :

background-size:cover;

Et en prime un article sur le sujet http://www.alsacreations.com/tuto/lire/1390-arriere-plans-css3-background.html


Bonne soirée à vous deux !

Bonjour à tous les 2

Déjà un grand merci pour vos réponses...

@_Laurent, oui c'est bien cette image là c'est une image en 1440x900

Sinon j'ai essayé le background-size:cover alors ça marche bien sur mon ordi (même si une partie de l'image est rognée ce qui est étonnant car j'ai un 24 pouces)

Par contre je suis en décalé par rapport à mon portable ou ma tablette...

Je vais essayer le css à 75Lionel et je vous redis = c'est bien mieux, je pense qu'il ne manque pas grand chose
Je vais aussi lire l'article car ça m'intéresse bien

il y a moyen que l'image ne soit pas crop? redimensionner l'image?
Modifié par pegase14 (02 Jul 2015 - 13:40)