Problème d'image de fond ; est-ce qu'une image extensible ça existe?

[thaom melcrudak]

Bonjour. J'ai tenté de mettre en application tous les tuto disponibles sur le sujet sans trouver de réponse.
Je suis fondatrice/Phpbb2/firefox/css et templates modifiés / www.ildir.purforum.com

J'ai ajouté plusieurs versions de mon image de fond pour qu'elle convienne à plusieurs résolutions. Cependant, elle ne semble pas s'adapter à mon écran puisqu'elle est trop près, son cadre ne s'adapte pas à mon écran. Y a t-il une quelconque facon de rendre l'image ''extensible?'' Avec J Query ,Css ?

Si je remplace

Code:

background-size:fixed;

par

Code:

background-size:contain;

Elle prend la bonne taille mais semble floue. Ma résolution est 1366 X 728 px.

J'ai appliqué un code JS que voici :

Code:

$(function(){

var bg= "http://nsa33.casimages.com/img/2014/03/29//140329064052894885.png";

if(screen.width < 801) bg="http://nsa33.casimages.com/img/2014/03/29//140329064405439498.png";
else if(screen.width < 1025) bg="http://nsa34.casimages.com/img/2014/03/29//140329064320906617.png";
else if(screen.width < 1281) bg="http://nsa34.casimages.com/img/2014/03/29//140329064221627589.png";
else if(screen.width < 1601) bg="http://nsa33.casimages.com/img/2014/03/29//140329064052894885.png";

document.body.style.backgroundImage="url(\""+bg+"\")";

});

Ainsi que ceci dans mon CSS concernant la bannière:

Code:

       body{
            background-position: top center;
            background-repeat: no-repeat;
            background-size:fixed
    
        }


merci !

[Invité]

Bonsoir,

J'ai cherché et je suis vite tombé sur ceci : http://www.alsacreations.com/astuce/lire/1216-arriere-plan-background-extensible.html

Je pense que cela vous sera utile.

Cordialement.

[thaom melcrudak]

Malheureusement cela ne semble pas fonctionner Même les exemples qu'ils donnent du résultat final ne fonctionne pas...

[Neptunia]

Bonjour !


Avez vous essayé de rajouter une ligne de type

Code:

else if(screen.width < 1367) bg="http://nsa34.casimages.com/img/1366pxdelarge.png";

-> Ligne à intercaler au bon endroit (entre 1281 et 1601)

En faisant une image supplémentaire de 1366 pixels de large.

[thaom melcrudak]

Oui, ça fonctionne mais j'ai tout de même l'impression que l'image est plus floue que l'originale...Et aussi je me demandais, pour ce qui est de la hauteur de mon logo (qui est transparent) ne devient-il pas problématique lorsque la résolution change d'un utilisateur à l'autre?

merci beaucoup !

[Neptunia]

Il est transparent et vide donc il ne posera aucun souci.

Oui, ça fonctionne mais j'ai tout de même l'impression que l'image est plus floue que l'originale...

Bah je dirai que c'est normal, ce n'est plus l'original donc c'est normal qu'il y ait une différence.

[thaom melcrudak]

Il pose un souci du côté d'où se termine la bannière et où commence le haut du forum non ? puisqu'il ne bougera pas tandis que la résolution de la bannière ne sera pas la même ?! Donc l'image se trouvera à être plus haute et on verra où commence la section ''généralités''

D'accord pour la qualité de l'image ^^

[Neptunia]

Pour le logo l'idéal serait de calquer sa hauteur sur celle de la bannière la plus légère.
Donc celle a 800 pixels de large. Ou trouver un juste milieu.

Sinon effectivement actuellement avec un logo de presque 800 pixels de haut, en 1280*1024 je suis obligé de scroller pour voir le message d'accueil.

[thaom melcrudak]

Merci beaucoup ! Je n'ai plus de question sur le sujet. Résolu