Mettre une image de fond à la balise body est une très mauvaise idée car il s'agit de l'ensemble de la page. Crée une balise div, et en css, utilises :
soit padding-top et padding-bottom avec une valeur de 20%
Mettre une image de fond à la balise body est une très mauvaise idée car il s'agit de l'ensemble de la page. Crée une balise div, et en css, utilises :
soit padding-top et padding-bottom avec une valeur de 20%
Peut-être, bien que ce soit une technique que l'on rencontre et je ne vois pas le souci, ou alors une contrainte avec le modèle Flexbox est possible sertes.
Bref, je pense qu'il ne fait que suivre le cours, voici la preuve sur le body :
Cette image est plutôt un motif, c'est un peu comme mettre une couleur, dans ce cas ça ne pose pas vraiment un problème. En revanche, une image (canard, montagne, etc...), ça n'est pas une bonne idée du tout car la hauteur de la page dépend de la quantité de contenu, ce qui varie d'une page à une autre. Et de toute façon, il y a des bonnes et des mauvaises pratiques, mettre une image ou une couleur de fond à la balise body peut être considéré comme une mauvaise pratique.
Oui mais je part du principe qu'il suit le cours d'OC, d'ou mon lien
Pour le reste je suis assez d'accord, bien que ça se discute tout de même, une image ou vidéo sur le body est du déjà vu, même si comme toi je le ferai dans un conteneur enfant dans le DOM.
Je viens compléter. Mettre un background sur body n'a JAMAIS été une mauvaise pratique... A aucun moment... Quels sont vos sources officielles pour affirmer cela? (me_moi et noopy360 ?)
Lord Morpheus, Seigneur Morphée, Dieu Grecs des Songes, Fils de la Nuit et du Sommeil
dans son cas, url("baniere.png") indique que l'image est situé dans le répertoire du css. Si le css est dans un dossier style ou css, le chemin devrait être de type url("../images/baniere.png). Cela vaut si on met les images dans un dossier images.
Concernant la pratique, Il est d'usage d'utiliser background-image dans body. En règle générale d'ailleurs l'image de background est une image de petite taille. Il est possible de dessiner un carré de 1x1 mm et de le mettre en background. Par défaut c'est l'effet mosaïque qui est pris en compte.
On pourra limiter l'affichage des l'image avec background-repeat=none.
Je n'ai pas de source officielle. En revanche, je pense de la façon suivante :
La balise body représente l'ensemble de la page en 2 dimensions, largeur et hauteur. La largeur dépend de la largeur de l'appareil - y compris pour les mobiles grâce à la balise
qui permet de régler le décalage entre le nombre de pixels du téléphone portable et le nombre de pixels du navigateur en ce qui concerne la largeur - mais reste cependant la même largeur d'une page à l'autre sur un seul et même appareil, alors que la hauteur dépend du contenu qui change d'une page à l'autre, c'est au passage la raison pour laquelle il vaut mieux éviter d'utiliser la propriété height sur un conteneur et le laisser avoir la hauteur en fonction de son contenu et n'utiliser que la propriété width pour jouer sur la largeur. Maintenant, où utiliser la propriété width ? sur la balise body ? imaginons qu'on veuille que la page fasse 96% de largeur pour les mobiles et 60% de largeur pour les ordinateurs et qu'on veut faire ça en mobile-first, on fera donc :
body
{
width: 96%;
}
@media all and (min-width:992px)
{
body
{
width: 60%;
}
}
Mauvaise idée car il s'agit de la balise body - l'ensemble de la page - il faut donc créer une balise div à l'intérieur de la balise body à laquelle appliquer cette largeur.
Maintenant, prenons un immense écran d'ordinateur qui a une largeur de, disons, 3000px, la balise body fera 3000px de large mais est-ce que la balise div fera 3000px de large ou bien elle aura une largeur maximum ?
body > div
{
width: 96%;
}
@media all and (min-width:992px)
{
body > div
{
width: 60%;
max-width: 1350px;
}
}
Il vaut mieux mettre une largeur maximum. Et là commence à apparaître le "problème" de mettre une image de fond à la balise body. Imaginons qu'on a pris une image qui fait 2000px de large pour être suffisamment grande, pour cet écran de 3000px de large, l'ordinateur aura recours à la pixellisation pour compenser le manque de pixels dans l'image (ici il manque 1000px) et si il s'agit d'une photo, le résultat sera désastreux, c'est pour ça que j'ai parlé de la différence entre un motif ou une couleur d'un côté et une photo de l'autre.
En plus du problème pour la largeur, il y a un problème aussi pour la hauteur, car encore une fois, la hauteur change d'une page à l'autre en fonction de son contenu sur un seul et même appareil, et la hauteur de l'appareil n'est pas pris en compte, et heureusement, car sinon, sur mobiles et tablettes, il n'y aurait vraiment pas beaucoup d'informations, et même sur les ordinateurs, tout serait compact.
On met donc une image de fond à la balise body et cette image est visible également pour les mobiles, l'image sera alors étirée sur toute la hauteur, et puisque la largeur sur mobile est (beaucoup) moins grande que sur ordinateur, la hauteur sur mobile sera donc plus grande que sur un ordinateur, bonjour le résultat de l'image.
Il vaut donc mieux mettre une image de fond à une balise div qui a une largeur précise (et pourquoi pas une hauteur précise aussi, si possible), que ce soit une largeur fixe en pixels ou une largeur dynamique en pourcentage.
On peut imaginer un autre "problème". Est-ce que l'image de fond doit être visible sur toute la hauteur (y compris en fond du header et du footer) ou seulement sur la partie de la page contenant le contenu même de la page, sans header et footer ? Je n'ai peut-être pas envie que cette image soit visible en arrière-plan de mon header car ça pourraît rendre moins lisible le contenu du header.
Et pour finir, même si openclassrooms a mis cet exemple d'une image de fond au body, ça n'a pas été appliqué au site même d'openclassrooms et aucun site sérieux "digne de ce nom" ne le ferait, parce que ça laisserait penser qu'il s'agit "d'amateurisme".
Le message qui suit est une réponse automatique activée par un membre de l'équipe. Les réponses automatiques leur permettent d'éviter d'avoir à répéter de nombreuses fois la même chose ce qui leur fait gagner du temps et leur permet de s'occuper des sujets qui méritent plus d'attention plus facilement. Nous sommes néanmoins ouverts et si vous avez une question ou une remarque, n'hésitez pas à contacter la personne en question par Message Privé. Pour plus d'informations, nous vous invitons à lire les règles générales du forum
Manque de précisions
Bonjour,
Vous êtes ici sur un forum d'entraide communautaire et non pas sur un forum de demande de service, le but n'est donc pas de fournir une réponse toute faite ou de directement fournir la solution à quiconque viendrait sans la moindre trace. Afin d'obtenir de l'aide et une solution à votre problème, il est fortement recommandé de présenter clairement l'état actuel du problème en nous fournissant :
Un descriptif clair et précis du problème
La tentative actuelle de résolution que vous avez effectué
Le résultat attendu et le résultat actuel
Toutes pistes de recherches pouvant aider à la résolution
Manque de Politesse
Bonjour,
Votre message ne comporte pas ou peu de formules de politesse (« Bonjour », « Merci », « Au revoir », etc.). Les règles du site exigent que chaque nouveau message comporte un minimum de politesse. Après tout, les gens qui répondent le font gratuitement, sur leur temps libre. Ils méritent bien un minimum de considération, n'est-ce pas ?
Merci de modifier votre message en conséquence via le bouton "Modifier" situé sur son coin supérieur droit, sans quoi le sujet sera fermé.
Merci d'utiliser les balises de code
Bonjour,
Les forums d'Openclassrooms disposent d'une fonctionnalité permettant de colorer et mettre en forme les codes source afin de les rendre plus lisibles et faciles à manipuler par les intervenants. Pour celà, il faut utiliser le bouton . Si vous utilisez l'éditeur de messages en mode Markdown, il faut utiliser les balises <pre class="brush: c;">Votre code ici</pre>.
Merci de modifier votre message en conséquence via le bouton "Modifier" situé sur son coin supérieur droit, sans quoi le sujet sera fermé.
Manque de recherche
Bonjour,
La question que vous posez est très fréquente, cela démontre un manque de recherche évident. Internet et ce forum fourmillent de sujets similaires.
Je vous invite effectuer de vraies recherches qui sont à la base d'un bon apprentissage ...
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Lord Morpheus, Seigneur Morphée, Dieu Grecs des Songes, Fils de la Nuit et du Sommeil
Moderateur forum || FAQ 3D || discord 3D francophone || OC Tweak script