taille background/resolution

Sujet résolu

16 février 2011 à 15:13:22

Bonjour a tous

Après une nuit blanche et beaucoup de café, je ne trouve pas la solution exacte à mon problème.
je voudrais pouvoir redimensionner la taille de mon image de fond en fonction de la taille de la fenêtre du navigateur. la JavaScript m'a l'air la meilleur solution, seulement voila j'ai bien trouvé quelques scripts sur le SDZ ou ailleurs mais je n'arrive pas a m'en servir si quelqu'un avait une solution miracle et pouvais m'expliquer comment l'intégrer a mon site.

merci d'avance

Micodeur

16 février 2011 à 15:23:45

Javascript n'est certainement pas adapté à ce genre de choses, il peut être désactivé et, de toutes façons, s'il ne l'est pas, ton user verra d'abord l'image en taille normale, puis modifiée par du JS :aie:

Gère plutôt ça en CSS, soit par un width/height, soit par un background:repeat, selon l'image que tu veux y mettre.

Mais, selon moi, vu les gros écarts de résolutions que peuvent avoir tes users, tu devrais jouer avec plusieurs morceaux de background, où tu ferais un background:repeat sur les parties centrales.

On fait ce qu'on peut, hein, vu que le SVG n'est pas encore supporté partout... :-°

NeuroFunk

16 février 2011 à 15:40:54

déjà merci de m'aider^^

l'autre problème c'est que mon background est une image pas seulement un fond sobre et que je ne veux pas la répéter afin de conserver l'estetique
(www.digimass.org pour te donner une idée)(d'ailleur je vien de m'apercevoir que je n'est plus la barre pour monter/descendre sur la droite :waw:

je devien fou)

Pour mon CSS j'ai ça:

body, html       {background:#000 url(images/Fond.jpg); background-size: 100% 100%, auto;
background-repeat : no-repeat;margin:0;padding:0;font-family:Verdana, Arial, Helvetica, sans-serif;text-align:center;color:#FFF;background-attachment: fixed;font-size:12px}

et je ne sais quoi en faire

Micodeur

16 février 2011 à 15:50:37

Justement pour ça que je disais "selon l'image..."

Pour ta scroll-bar, normal, tu as mis un overflow:hidden

Essaie d'utiliser, selon tes besoins, des position:absolute et/ou position:relative, sur tes éléments et ça devrait aller.

NeuroFunk

16 février 2011 à 16:25:47

bah j'essaye, j'essaye, mais sans grands résultats. Mais j'abandonne, l'ordinateur à gagné. Je vais laisser tel quel, ca rend pas si mal sur d'autres résolutions et je verrais plus tard pour modifier ça. A moins que quelqu'un débarque et trouve une solution révolutionnaire^^

En tous cas merci!

Elias le Vert

16 février 2011 à 16:40:52

Yop !

Comme l'a noté Micodeur, pour avoir un background qui change de taille, l'image ne doit pas se trouver réellement en background. Tu peux simuler une image de background en la mettant en arrière-plan du texte.

Exemple concret : http://www.twiip.ch/dev/bgdynamique/
Tout le code se trouve dans la source.

Dans le code-source, tu verras qu'en tout début du <body> se trouve mon image :

<image id="background" src="bg.jpg"/>

Celle-ci est mise au dimension de la fenêtre au chargement de la page, puis le changement de taille de la fenêtre est surveillé (avec un window.onresize). Tu peux donc redimensionner la taille de la fenêtre, l'image s'adaptera (en ajustant la taille du côté le plus petit, et en rognant l'image pour remplir l'espace en la gardant centrée).

A noter que c'est du js natif, et qu'il sera plus propre avec une librairie (genre prototype) pour récupérer les dimensions de la fenêtre et gérer les évènements. Mais si ton site ne contient rien d'autre en javascript, cet exemple fera l'affaire.

NeuroFunk

16 février 2011 à 21:24:53

Yep! Ça marche nickel! merci beaucoup pour vos astuces!