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.
/*La couleur de fond*/
body /* On travaille sur la balise body, donc sur TOUTE la page */
{
background-color: #9dceee; /* Le fond de la page sera : ...*/
color: black; /* Le texte de la page sera : ...*/
background-image: url("../images/Parchemin.jpg");
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).*/
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) */
background-position: center; /* 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
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.
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
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!
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/
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.
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
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.
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?
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).
@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)
Le CSS ça peut craindre -->Conférence CSS3.CREATE
Le CSS ça peut craindre -->Conférence CSS3.CREATE
Le CSS ça peut craindre -->Conférence CSS3.CREATE
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !