taille de l'image de fond dynamique ?Fermé

Question

Bonjour,

Voila, pour un siteweb, j'ai une image de fond et j'aimerais que cette image soit la même peu importe les tailles d'ecrans et la resolution...
Est-ce que c'est possible de faire ca en Java via un redimenssionement de l'image ?
Si oui, pourriez vous me rediriger vers un lien qui explique comment faire ?

Ou ya t'il une autre solution ?

Pour le moment l'image est setté en Css dans les propriétés du body...

Merci d'avance pour vos réponses.

ataos · Answer

Bonjours, tu dois pouvoir mettre dans le css de l'image, un height:100%; et width:100%; 
Je pense que ça pourrait marcher. 
Quelque chose de cet ordre là:

body {
 height:100%;
 width:100%; //bon là on a étiré notre body au max de l'écran. je ne sais pas si c obligatoire mais bon. 

}
#fond_body{
position:absoute;
top:0px;
left:0px;
height:100%;
width:100%; //Je créais une div qui portera ton fond redimensionnable
z-index:1;
}
et maintenant on va modifier les image de notre div fond_body

#fond_body img {
height:100%;
width:100%;
}

#fond_body img. Lire:"Toutes les images contenues dans la div fond_body". Donc n'y mettre qu'une image et rien d'autre. 

z-index:1; Ici on affecte une 'profondeur' à notre page. Aussi, toutes les div qui devront se trouver par dessus celle là (Par dessus le background, donc toutes), devront avoir dans leur css, un z-index supérieur pour être visibles. Je ne sais pas si on peut utiliser un z-index:0, et si ça nous éviterait d'avoir à spécifier un z-index à toutes les autres div. Mais personnellement j'aime bien contrôler ce qui se passe, quitte à dire des choses inutiles. A toi de faire des test. 

Bon, j'ai testé le code que je te donne, et chez moi ça marche. 

Sinon il y a une façon en php avec une librairie spéciale, qui fabriquerait l'image de fond à chaque fois qu'un utilisateur la charge. Mais je pense que se ne serait pas approprié. Disons que ça demanderait je pense, trop de ressource à ton serveur pour 'si peu'.

Bon courage. :)

je t'ai fait un pti rar si tu veux voir un exemple:
http://lememo.webou.net/fond.zip

dysphory · Answer

Merci pour ta réponse, je vai essayer ca tout à l'heure !

Merci !

dysphory · Answer

Je viens de tester !

Alors ca marche, mais du coup, je ne comprend pas trop ou il faut que je mette les autres DIV....je ne peu pas les metre dans la div fond_body, réservée a l'image.
C'est donc soit avant, soit apres.
Et logiquement, ce sont les Z-index qui devraient donner l'ordre d'affichage.
Mais du coup la div fond_body entre en conflit avec mes autre div et ne peut pas s'étirer sur les 100% de la page, bloqué par les autres.

Enfait par dessus ce fond jai une div Main qui doit faire width: 100%; et height: 50%; 
Cette Div Main bloque le fond à 50% de la page.

Alors apres suivant si je met la position de Main en avsolute ou pas, ca décale le contenu au bon endroit, mais le div fond_body reste bloqué a 50%...

Je crois que c'est bcp plus complexe que ce que j'avais imaginé.

Il y a peut etre un moyen de corriger ca avec ta technique....? 
pour que ca soit plus explicite voici la page en question :

http://neosistest.darklight-creations.com/index1.html > Voici ce que ca doit donner normalement ( sans utiliser ton code )

http://neosistest.darklight-creations.com/index2.html > Et voici ce que cela donne avec ton code

D'autre part, j'en demande surement trop sur ce coup, mais existe-t-il un moyen pour que l'image se redimenssionne homotetiquement ? ^^

MICHEL35 · Answer

c pas le body qu'il faut changer, faut que tu crée un class background je pense

ataos · Answer

Pour répondre au problème des 50%, mets la div contenant ton fond en dehors de toute autre div. genre body>

...le reste du site... Avec effectivement l'histoire des Z-index. :)

merlone · Answer

Pas mal l'astuce, ça m'a bien servi aussi ! Merci !

Taille de l'image de fond dynamique ?

6 réponses

Discussions similaires

Newsletters