Rechercher : dans
Par :

Taille de l'image de fond dynamique ?

Dernière réponse le 20 nov 2009 à 22:43:25 dysphory, le 7 oct 2009 à 02:24:33 
 Signaler ce message aux modérateurs

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.

Meilleures réponses pour « taille de l'image de fond dynamique ? » dans :
Agrandir une image de petite taille VoirQuand l'ordinateur agrandit une image, il doit "inventer" les pixels manquants. Il existe différentes méthodes de calcul pour inventer ces pixels. Sommaire: Photo Dessin au trait Recommandations pour de meilleurs résultats Liens Le...
[Webmaster] Afficher une image de grande taille VoirPour la plupart des internautes, afficher une image de grande taille dans une page web est trop lourd. Zoomify est un petit programme Flash qui permet de rendre une image zoomable et navigable, et chargeant l'image par morceau selon le...
Diminuer la taille d'une image VoirSi vous trouvez que vos photos sont trop grosses ou trop lourdes (par exemple pour envoyer par mail ou pour publier sur une page web), voici 4 étapes pour diminuer la taille des fichiers: Étape 1 (optionnel !) : Passer GREYCStoration sur...
Gestion des images en HTML VoirComment afficher des images sur une page web? Quelques images sur un site Web peuvent le rendre plus attractif et plus convivial, cependant il est important de ne pas sombrer dans l'excès car les images peuvent impliquer un temps de chargement...
PHP - Génération d'images VoirPrérequis PHP permet de créer des images au format GIF à l'aide d'une librairie de fonctions prévue à cet effet. La librairie permettant de créer et manipuler des fichiers graphiques se nomme GD, ainsi, pour pouvoir utiliser ces fonctions il faut...

1

ataos, le 7 oct 2009 à 12:13:52

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

Répondre à ataos

2

dysphory, le 7 oct 2009 à 17:55:05

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

Merci !

Répondre à dysphory

3

dysphory, le 7 oct 2009 à 18:57:35

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 ? ^^

Répondre à dysphory

4

MICHEL35, le 7 oct 2009 à 19:08:52

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

Répondre à MICHEL35

5

ataos, le 8 oct 2009 à 15:00:23

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.

:)

Répondre à ataos

6

 merlone, le 20 nov 2009 à 22:43:25

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

Répondre à merlone