Background responsive
Syn59
Messages postés
8
Date d'inscription
Statut
Membre
Dernière intervention
-
animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention -
animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention -
Bonjour messieurs et mesdames de l'internet,
Pour commencer merci de me lire et merci pour vos éventuelles réponses.
Mon problème est le suivant :
Je me créer actuellement un site Wordpress pour mon activité de graphiste (pas infographiste, je suis spécialisé dans le print mais une grosse quiche lorraine en web) le problème qui se pose réside dans mon fond d'écran que je me suis amusé à modifier sous Photoshop. D'un écran à l'autre, la taille change (normal vous me dirais mon bandeau à une taille définie et sur un écran plu grand bah ... il ne suit pas l'gaillard). Ce que j'aimerais savoir c'est comment avoir le même rendu qu'importe la taille de l'écran (moniteur,télé,tablette et smartphone)
Des petites photos pour illustrer le problème et pour que ce soit plus clair pour vous :
Ce que j'ai sur mon PC et donc ce que je veux :
http://hpics.li/a0d6380
Ce qui s'affiche sur un autre PC un poil plus grand
http://hpics.li/ef5d637
J'ai bien évidemment cherché sur le Web avant de poser ma question, mais je n'ai rien trouver de précis ou alors que du code et je m'y perds à la longue.
Donc si vous pouviez éclairer mon lampion de votre brillante lumière je vous serai très reconnaissant.
Bons soirée et encore une fois Merci
Pour commencer merci de me lire et merci pour vos éventuelles réponses.
Mon problème est le suivant :
Je me créer actuellement un site Wordpress pour mon activité de graphiste (pas infographiste, je suis spécialisé dans le print mais une grosse quiche lorraine en web) le problème qui se pose réside dans mon fond d'écran que je me suis amusé à modifier sous Photoshop. D'un écran à l'autre, la taille change (normal vous me dirais mon bandeau à une taille définie et sur un écran plu grand bah ... il ne suit pas l'gaillard). Ce que j'aimerais savoir c'est comment avoir le même rendu qu'importe la taille de l'écran (moniteur,télé,tablette et smartphone)
Des petites photos pour illustrer le problème et pour que ce soit plus clair pour vous :
Ce que j'ai sur mon PC et donc ce que je veux :
http://hpics.li/a0d6380
Ce qui s'affiche sur un autre PC un poil plus grand
http://hpics.li/ef5d637
J'ai bien évidemment cherché sur le Web avant de poser ma question, mais je n'ai rien trouver de précis ou alors que du code et je m'y perds à la longue.
Donc si vous pouviez éclairer mon lampion de votre brillante lumière je vous serai très reconnaissant.
Bons soirée et encore une fois Merci
A voir également:
- Background responsive
- Windows 7 logon background changer - Télécharger - Thèmes & Fonds d'écran
- Starter background changer - Télécharger - Thèmes & Fonds d'écran
- John's background switcher - Télécharger - Suite bureautique
- Background color css ✓ - Forum CSS
- Realtek audio background process class ✓ - Forum Pilotes (drivers)
3 réponses
Bonjour
Evidemment cela se fait avec du code donc rien a voir avec photoshop (calques, redimensions, images fixes etc avec une souris et des raccourcis claviers).
il faut donc réflechir a un design fluide qui s'adapte a toutes les résolutions.
Pensez un web design comme une affiche en print est une grosse erreur et c'est ce que tu fais.
Les éléments graphiques en design fluide peuvent donc être rognés (par la droite) et ne pas correspondre a ce qui est au dessus ou au dessous surtout si certains éléments sont fixes et alignés a gauches alors que d'autres ( en dessus) sont en % et centrés comme dans ton exemple
sinon il faut que la largeur de la page (contener) soit fixe (de la largeur de l'image) et centrée donc essaie de choisir un thème a taille fixe et centré
et tu remplace le header avec ton image (meme taille). Pense tout de même que pour des résolutions inférieures la largeur fixe n'est pas recommandée.
Pour faire de profondes modification à un thème WP ou pour faire du design web personnalisé et plus encore du responsive design, il faut connaitre les langages CSS / html
sans la connaissance de ces langages il faut se contenter des thèmes prêts à l'emploi.
De plus comme ton site n'est pas en ligne, c'est impossible de t'aider avec des outils comme firebug
Voila
Evidemment cela se fait avec du code donc rien a voir avec photoshop (calques, redimensions, images fixes etc avec une souris et des raccourcis claviers).
il faut donc réflechir a un design fluide qui s'adapte a toutes les résolutions.
Pensez un web design comme une affiche en print est une grosse erreur et c'est ce que tu fais.
Les éléments graphiques en design fluide peuvent donc être rognés (par la droite) et ne pas correspondre a ce qui est au dessus ou au dessous surtout si certains éléments sont fixes et alignés a gauches alors que d'autres ( en dessus) sont en % et centrés comme dans ton exemple
sinon il faut que la largeur de la page (contener) soit fixe (de la largeur de l'image) et centrée donc essaie de choisir un thème a taille fixe et centré
et tu remplace le header avec ton image (meme taille). Pense tout de même que pour des résolutions inférieures la largeur fixe n'est pas recommandée.
Pour faire de profondes modification à un thème WP ou pour faire du design web personnalisé et plus encore du responsive design, il faut connaitre les langages CSS / html
sans la connaissance de ces langages il faut se contenter des thèmes prêts à l'emploi.
De plus comme ton site n'est pas en ligne, c'est impossible de t'aider avec des outils comme firebug
Voila