18043 sujets

Questions générales et questions de débutants

[Résolu] Adaptation image aux différents écrans d'ordinateurs

Bonjour,
Ayant déjà cherché, trouvé des tutos (ex ici : http://www.alsacreations.com/astuce/lire/1216-arriere-plan-background-extensible.html) et essayé d'écrire des codes, je n'arrive pas à faire en sorte que l'image en fond d'écran sur le site http://www.synchronicites.fr s'adapte aux différents écrans d'ordinateur.
Malgré plusieurs essais, l'âge -63- explique peut-être cela Smiley decu
Voici les quelques lignes qui, me semblent-il, concernent la chose.

34 </style>
35</head>
36<body
37 style="background-color: rgb(255, 255, 255); background-image: url(images/sentierdelumiere.jpg);">
38<table border="0" height="647" width="100%">
39 <tbody>
40 <tr>
41 <td colspan="2">
42 <div align="center"><font
43 face="Arial, Helvetica, sans-serif"><b><font

J'utilise Komposer version 0.7.10 (20070831) pour "travailler" sur ces codes

Si quelqu'un avait l'amabilité de me fournir le "truc" à faire pour y arriver ce serait très sympa.

Et bonne année 2015 tant que j'y suis, on n'en est plus très loin Smiley smile

gégé
Modifié par teichezgege (30 Dec 2014 - 20:03)
Salut Gégé !

Sur l'exemple que tu montres il manque la propriété magique indispensable : background-size !

Et donc en essayant "ce truc" ça devrait l'faire Smiley smile 
<body style="background-color: rgb(255, 255, 255); background-image: url("images/sentierdelumiere.jpg"); background-repeat: no-repeat; background-size: cover; background-position: left top;">


Bonne année à toi !
Bonjour Gili.
Je viens d'essayer le "truc" magique.
J'ai effectivement une seule image, en haut à gauche, et malgré le background-size: cover, ça ne remplit pas la page complètement, le reste est blanc.
Il doit manquer une information quelque part.
Peut-être que d'autres lignes de commande sont nécessaires ?

Bonne fin d'année à toutes et à tous.

gégé
Rebonjour,

Quand je vais sur http://www.synchronicites.fr/ que je fais clique droit/inspecter élément et que j'ajoute "background-color: rgb(255, 255, 255); background-image: url("images/sentierdelumiere.jpg"); background-repeat: no-repeat; background-size: cover; background-position: left top;" (donc ce que j'ai mis au précédent post) dans la balise body ça fonctionne.

- Es-tu sûr d'avoir fait un bon copié/collé ?
- Es-tu sûr qu'en local tu n'as pas d'autre propriété qui écrase cela (avec des !important à côté?)

Tiens nous au courant Smiley smile
Bonjour/soir Gili, et merci pour le temps passé !

J'ai essayé de mettre les bonnes informations et ça ne fonctionne pas.
J'ai fait la manip telle que tu l'as donné à partir de la page du site, et ça fonctionne effectivement très bien.
Il doit donc y avoir des importants qui gênent quelque part Smiley decu

Voici des lignes qui en ont (juste avant) :
---------------------------------------------------------------
<!--
.gege { font-family: Arial, Helvetica, sans-serif; font-size: 12pt; font-style: normal; font-weight: bold; color: #FF0000; background-color: #CCFFCC; text-decoration: blink}
.GEGE1 { font-family: Arial, Helvetica, sans-serif; font-size: 12pt; font-style: normal; font-weight: bold; color: #FF0033; text-decoration: blink; background-color: #CCFFCC}
-->
</style>
</head>
<body
style="background-color: rgb(255, 255, 255); background-image: url(images/sentierdelumiere.jpg);">
<table border="0" height="647" width="100%">
-----------------------------------------------------------------

Il est sans doute possible de mettre beaucoup plus de lignes de code (en P.J. ou stockées quelque part) pour examiner ça de plus près.

En tout cas, avec Komposer, lorsque je mets toutes les infos voulues et que je fais un aperçu, le background-size disparait à chaque fois et je n'ai qu'une seule image.
Il y a sans doute une info contradictoire avant ???
C'est encore moi Smiley confused

Après avoir cherché un peu partout, il n'est pas impossible que la version de Komposer (0.7.10(20070831) ne puisse pas prendre en compte le background-size: cover.
En cherchant dans des tutos Komposer et en faisant les essais, je ne vois pas la possibilité de faire en sorte qu'une image prenne tout l'écran.

Peut-être est-ce simplement ça.
Je ne connais pas Komposer mais cela serait très étonnant. Dans tout les cas tu peux aller éditer tes fichiers manuellement (sans passer par Komposer) et rajouter les lignes que je t'ai écrite plus haut.
Je viens d'y arriver en éditant sans passer par komposer. J'ai juste ouvert firefox et avec le clic droit ensuite examiner l'élément puis mis les modifs que tu m'as donné. J'ai juste mis center pour la position au lieu de left top.
Par contre, maintenant j'ai toutes les pages du site à modifier.
existe-t-il un système plus rapide que de se les reprendre une à une ?

En tout cas merci pour le temps consacré Smiley smile .

Excellente fin de journée.

gégé
Oui il existe un système sympa et je vois sur ton site que tu ne l'utilises pas, ça va te changer la vie. Tu vois tu as édité un fichier à la main sans passer par Komposer, quand tu travailles comme ça tu as beaucoup plus de liberté (et tu peux tester pleins de chose en CSS c'est sympa, mais du coup il faut l'écrire à la main).

Ici je te propose de rassembler tout ton CSS dans un fichier unique et d'appeler ce fichier sur chaque template, ainsi tu n'auras plus qu'a écrire une fois ton CSS. Voici la marche à suivre :

- Crées un fichier que tu appelleras style.css;
- Places le par exemple dans ton répertoire "pages" là où tu as tes documents HTML;
- Lies ton fichier style.css à tes pages HTML en les éditants à la main et en copiant cette ligne dans la balise <head> :
<link rel="stylesheet" type="text/css" [b]href[/b]="chemin/style.css" />
- il faudra que tu remplaces la valeur de l'attribut href afin de pointer vers ton fichier style.css avec un chemin relatif;

J'espère que c'est assez explicite. Avec cette façon de procéder tu pourras créer toi même ton CSS et en faire profiter toutes tes pages.

Avec plaisir !
Merci, je vais essayer ça et si ça coince je redemanderais des compléments d'information.
Comme c'est nouveau pour moi je vais bidouiller pas mal, mais ça va entretenir mes neurones.

Excellente fin de journée.

gégé
Euh !!! C'est un peu compliqué pour moi Smiley confused

Peux-tu me donner un éditeur (simple) à télécharger et je me ferais les pages à la main, à l'ancienne, ça me correspond mieux.

Bonne fin de journée.

gégé
Et ben voilà !
L'ancien que je suis n'est pas arrivé à faire en sorte de tout pouvoir changer simplement avec quelques lignes de commande.
Avant de clore le sujet je donne l'information qui peut servir à des néophytes comme moi :
J'ouvre une page avec firefox puis clic droit et examiner l'élément.
Ensuite je fais la modif en mettant ça :
(style="background-color: rgb(255, 255, 255); background-image: url(../images/sentierdelumiere.jpg); background-repeat: no-repeat; background-size: cover; background-position: center;)
à la place de ce qu'il y a après body
Ensuite je referme la fenêtre examiner l'élément puis j'enregistre sur mon d dur en mettant un nom de fichier avec un petit 1 -pour vérifier- sans oublier le type de fichier; j'ai mis :
Page web, complète (*.htm; *.html)
Ensuite j'utilise filezilla pour remonter ce fichier sur le serveur, en l'occurence O.V.H.

Je renouvelle mes voeux à toutes et à tous.

gégé
Modifié par teichezgege (14 Jan 2015 - 16:13)
Sujet clos
Aller à