Page 1 sur 1

[Résolu] adaptation image aux largeurs d'écrans

Publié : 18 mai 2012, 20:35
par teichezgege
Bonjour,
Malgré mes recherches je n'ai pu trouver la réponse à ma question : :oops:
Comment faire en sorte que l'image de fond d'écran s'adapte à la taille de l'écran :?:
Et aussi que les écritures soient sur cette plus grande image :?:
le site est ici : http://www.synchronicites.fr

une partie du code concerné (il me semble) :

<style type="text/css">
<!--
.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%">
<tbody>
--------
Merci d'avance pour les informations et bonne fin de journée.

gégé

Re: adaptation image aux largeurs d'écrans

Publié : 21 mai 2012, 14:58
par chinon37
Bonjour,

Comme déjà dit sur ce forum, il n'est pas vraiment possible, à l'heure actuelle, d'avoir une adaptation de la taille de l'image en fonction de la taille de l'écran d'affichage.

Re: adaptation image aux largeurs d'écrans

Publié : 22 mai 2012, 00:20
par Ymai
Bonjour
chinon37 a écrit :Bonjour,

Comme déjà dit sur ce forum, il n'est pas vraiment possible, à l'heure actuelle, d'avoir une adaptation de la taille de l'image en fonction de la taille de l'écran d'affichage.
C'est exactement la réponse que j'avais envie de faire: l'image de fond de l'élément <body> a une dimension fixe et non modifiable.
Et puis, tout compte fait, je me dis que peut-être, avec une sauce Javascript, il y a éventuellement une solution en contournant les règles de base imposées par Kompozer qu'il faudra laisser sur la touche. Genre sélectionner une image convenable en fonction de la résolution de l'écran (http://www.pageresource.com/jscript/jscreen.htm ) ou utiliser un autre conteneur que <body> pour contenir l'image (solutions à détailler).
Avec un peu d'aspirine à portée de la main, ou une bonne connaissance de CSS et jQuery, cela vaut sans doute la peine de jeter un coup d'œil à http://css-tricks.com/perfect-full-page ... und-image/ (EN)
Il reste à me convaincre qu'une image de fond de grande taille sur tout l'écran est, esthétiquement, une bonne idée. Il faut garantir la lisibilité des textes sur un fond inhomogène.
Mais je suis capable de changer d'avis face à des arguments de poids.

Re: adaptation image aux largeurs d'écrans

Publié : 22 mai 2012, 15:30
par chinon37
En fait, en complément de mon honorable ami et néanmoins belge, je dois avouer avoir fait une réponse de fainéant :oops:

Il existe bien une solution, absente dans KompoZer car en css3. Considérant, peut être à tort, au vu de son site, que notre interlocuteur était débutant, je n'ai pas voulu le noyer dans des considérations de styles css3 complexes et non compatibles avec l'application html que nous chérissons encore... et malgré tout.
il s'agit de la propriété

Code : Tout sélectionner

 background-size: cover;
Plus de détails ici: http://www.alsacreations.com/astuce/lir ... sible.html

Re: adaptation image aux largeurs d'écrans

Publié : 22 mai 2012, 16:33
par stobag
Je ne connaissais pas background-size:cover;, merci pour l'info.

Sinon y'a moyen de faire ce que tu veux en javascript avec jQuery : à l'événement resize de window tu met à jour l'attribut width de ton image.