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

teichezgege · Message par **teichezgege** » 18 mai 2012, 20:35

Bonjour,
Malgré mes recherches je n'ai pu trouver la réponse à ma question :

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">

</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é

Message par **chinon37** » 21 mai 2012, 14:58

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.

Message par **Ymai** » 22 mai 2012, 00:20

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.

Message par **chinon37** » 22 mai 2012, 15:30

En fait, en complément de mon honorable ami et néanmoins belge, je dois avouer avoir fait une réponse de fainéant

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

stobag · Message par **stobag** » 22 mai 2012, 16:33

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.

Geckozone

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

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

Re: adaptation image aux largeurs d'écrans

Re: adaptation image aux largeurs d'écrans

Re: adaptation image aux largeurs d'écrans

Re: adaptation image aux largeurs d'écrans

Qui est en ligne ?