Partage

Ajuster l'image de fond à la taille de la fenêtre du navigateur

Le 7 avril 2008 à 11:14:47

Bonjour à toutes et à tous. Je débute dans la programmation des sites Internet. Et je cherche la solution pour que mon image de fond s'ajuste à la fenêtre du navigateur en fonction de la résolution de l'écran... Je cherche aussi à savoir quelle est la meilleure définition pour une image d'arrière-plan de sites Internet.
Extrait du CSS gérant l'image de fond.
  1. /*La couleur de fond*/
  2. body                                                            /* On travaille sur la balise body, donc sur TOUTE la page */
  3. {
  4.    background-color:     #9dceee;       /* Le fond de la page sera : ...*/
  5.    color:                                black;         /* Le texte de la page sera : ...*/
  6.    background-image:     url("../images/Parchemin.jpg");
  7.    background-attachment:fixed;         /*Permet de "fixer" le fond, pour ne pas qu'il bouge en même temps que le texte (fixed, scroll)  scroll : l'image de fond défile avec le texte (par défaut).*/
  8.    background-repeat:    no-repeat;     /* Gère la répétition du fond :      no-repeat : le fond ne sera pas répété. L'image sera donc unique sur la page.        repeat-x : le fond sera répété uniquement sur la première ligne, horizontalement.   repeat-y : le fond sera répété uniquement sur la première colonne, verticalement.   repeat : le fond sera répété (par défaut) */
  9.    background-positioncenter;        /* Gère la position de l'image  top : en haut.  bottom : en bas.  left : à gauche.  center : centré.  right : à droite. Il est possible de combiner ces mots   exemple :background-position: top right;*/

Je vous remercie d'avance pour l'attention portée à ce message
Publicité
Le 7 avril 2008 à 11:14:47
Le 7 avril 2008 à 11:57:34

Si c'est une image, il ne vaut mieux pas qu'elle s'ajuste à la résolution de l'écran car elle sera déformée. Est ce que tu peux nous montrer cette image ?

Si tu fixe la largeur de ton site, tu n'auras pas ce problème.
Le 7 avril 2008 à 17:57:34

Autant pour moi je n'ai pas utilisé le terme ce n'est pas une image mais une texture. Donc la déformer n'est pas bien grave. Voici l'adresse où se trouve l'image.
http://images3.hiboox.com/images/1508/a68nuffl.jpg
Le 7 avril 2008 à 19:23:19

margin-auto :p
Le 7 avril 2008 à 19:58:57

Comment doit-on écrit cette commande ?
Le 9 avril 2008 à 9:55:20

?Personne ne peut m'aider ?
Le 9 avril 2008 à 10:52:30

J'ai dèja codé pas mal de sites mais je me suis toujours interessé a comment certains sites faisaient pour avoir un background qui change selon la résolution. Je suis moi aussi curieux de savoir!
Le 8 juillet 2010 à 1:44:22

Salut.

Pour ajuster une image aux mesures de la fenêtre (sans déformer l'image), on peut tout simplement utiliser ce script tout prêt :
http://www.webbricks.org/bricks/bgMax/
Le 4 novembre 2010 à 3:37:48

Bonjour,

Je suis débutant en JS et j'avance petit à petit grâce à ce merveilleux site.

Bref, j'ai repris le script bgMax présenté ci-dessus couplé à un script de chargement aléatoire d'image puisées dans un dossier. Il est génial, mais a cependant un petit "défaut" pour l'usage que je compte en faire...

Il permet de redimensionner une image en fonction de sa largeur, mais pas de sa hauteur ; ce qui fait que si on redimensionne la fenêtre horizontalement, le fond finit par apparaître.

Est-ce possible d'adapter ça ? Si oui, quelqu'un pourrait m'indiquer comment faire ? J'ai essayé, mais étant vraiment néophyte, je n'y arrive pas.

Merci d'avance et bonne journée.
Le 4 novembre 2010 à 7:01:14

personnellement, je fais comme ça :

en html
<body> <img src "image_de_fond" id="fond" ...>
</body>

en css
#image_de_fond {
position fixed;
top:0%; height:100%;
left:0; width:100%;
}
Le 4 novembre 2010 à 15:04:11

Citation : thialcine

personnellement, je fais comme ça :

en html
<body> <img src "image_de_fond" id="fond" ...>
</body>

en css
#image_de_fond {
position fixed;
top:0%; height:100%;
left:0; width:100%;
}



Oui, mais ça ne redimensionne pas comme le script en question.
Le 9 juillet 2014 à 15:12:37

pour ajuster l'image de fond tu je pense que tu peux utiliser les medias queries.

regarde le tuto: http://fr.openclassrooms.com/informatique/cours/apprenez-a-creer-votre-site-web-avec-html5-et-css3/mise-en-page-adaptative-avec-les-media-queries

Le 9 juillet 2014 à 15:31:06

mais non ... un simple : 

body {
    background:url(ton_image.jpg');
    background-size:cover;
    margin:0;
}

et ton image épousera la résolution de l'écran

en revanche, si tu utilises cette image en fond comme dis précédemment, tu vas devoir faire un site qui occupera la largeur complète avec des margin et des pourcentage.

si c'est un premier site, je te conseille plutôt de mettre ton fond en noir et de découper ton parchemin en trois partie : header body et footer et de lui donner une taille fixe et centrée.

Le 11 juillet 2014 à 15:26:36

Bonjour,

stefde3, j'ai essayé ta solution: ça marche quand la fenêtre est en plein écran, mais chez moi, si je réduis la taille de la fenêtre, l'image fait encore la même taille et donc dépasse sur les côtés.

Existe-t'il un moyen d'adapter la taille de l'image pour matcher avec la largeur de la fenêtre?

Merci!

Le 13 juillet 2014 à 11:31:01

oui

body, html {
    background:url('TonImage.jpg');
    background-size:cover;
    margin:0;
    width:100%;
    height:100%;
    background-repeat:no-repeat;
}

essaye ça

-
Edité par stefde3 le 13 juillet 2014 à 11:38:07

Le 13 juillet 2014 à 14:42:21

stefde3 cela fait un moment que tu es sur ce forum. Me dit pas que tu n'as pas encore vu tout le bien que l'on pense du width 100%.
Le 14 juillet 2014 à 10:49:31

Hey!

stefde3, je viens d'essayer ton code, et j'ai des trucs bizarres.

L'image s'adapte effectivement en largeur à la taille de ma page, et la hauteur s'adapte pour respecter le format de l'image. Ça c'est cool!

J'ai maintenant un autre problème: quand la fenêtre est plus large que l'image (proportionnellement), puisque l'image s'adapte en largeur, le bas de l'image sort de la fenêtre. C'est logique, mais je voudrais bien avoir une scrollbar pour faire défiler vers le bas. Est-ce que c'est possible avec un background? Notons que si je mets l'image en background, je ne veux rien devant (puisque l'image est mon contenu).

Voilà, merci pour votre aide à tous en tout cas!

Le 17 juillet 2014 à 12:23:56

@rigs : oui c'est pas faux ^^

@leroidangleterre : le problème est que tu cherches à faire un truc impossible. un background en size:cover ne scrollera jamais, il restera fixe.

C'est le contenu après ta balise Body qui va scroller 

Pour ça que je t'ai dit d'utiliser ton parchemin comme body scrollable et de mettre un fond noir derrrière

En gros ça devrait te donner ça : 

body {
    background:black;
    margin:0;
    padding:0;
}

/* et ici ton parchemin scrollable */

section {
    background:url('ton_parchemin.png');
    background-repeat:repeat-y;
    width: sa largeur;
    margin: auto; /* pour centrer sur la page */
}

et là ton parchemin pourra être scroller 

mais il faut d'abord que tu le découpes en 3 parties : 

header 

body-scroll (la partie qui va se dupliquer pour y rentrer toutes tes infos)

et footer

-
Edité par stefde3 le 17 juillet 2014 à 12:29:35

Ajuster l'image de fond à la taille de la fenêtre du navigateur

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown