Taille de l'image de fond dynamique ?

Fermé
dysphory Messages postés 37 Date d'inscription mardi 24 mars 2009 Statut Membre Dernière intervention 16 février 2010 - 7 oct. 2009 à 02:24
merlone Messages postés 206 Date d'inscription dimanche 17 février 2008 Statut Membre Dernière intervention 21 juillet 2011 - 20 nov. 2009 à 22:43
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.

6 réponses

ataos Messages postés 72 Date d'inscription vendredi 11 avril 2008 Statut Membre Dernière intervention 6 août 2012
7 oct. 2009 à 12:13
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
0
dysphory Messages postés 37 Date d'inscription mardi 24 mars 2009 Statut Membre Dernière intervention 16 février 2010
7 oct. 2009 à 17:55
Merci pour ta réponse, je vai essayer ca tout à l'heure !

Merci !
0
dysphory Messages postés 37 Date d'inscription mardi 24 mars 2009 Statut Membre Dernière intervention 16 février 2010
7 oct. 2009 à 18:57
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 ? ^^
0
c pas le body qu'il faut changer, faut que tu crée un class background je pense
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
ataos Messages postés 72 Date d'inscription vendredi 11 avril 2008 Statut Membre Dernière intervention 6 août 2012
8 oct. 2009 à 15:00
Pour répondre au problème des 50%, mets la div contenant ton fond en dehors de toute autre div.

genre

body>
<div id=img_fond></div>
...le reste du site...

Avec effectivement l'histoire des Z-index.

:)
0
merlone Messages postés 206 Date d'inscription dimanche 17 février 2008 Statut Membre Dernière intervention 21 juillet 2011 53
20 nov. 2009 à 22:43
Pas mal l'astuce, ça m'a bien servi aussi ! Merci !
0