Je suis en train de faire le cours HTML / CSS de Mathieu en ce moment et je bloque sur l'activité n°2.
Simplement à cause d'un background-image qui ne veut pas changer de taille sans que je comprenne pourquoi.
Voici mon code HTML :
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
<meta charset="utf-8">
<title>Curriculum vitæ</title>
<link rel="stylesheet" href="index.css">
<link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">
</head>
<body>
<h1 style="color: white; text-align: center;">Clément Chancerel</h1>
<p>Apprenti developpeur au sein de CGI</p>
<a href="https://upload.wikimedia.org/wikipedia/fr/thumb/0/0d/Logo_OpenClassrooms.png/320px-Logo_OpenClassrooms.png" target="_blank"><img src="https://upload.wikimedia.org/wikipedia/fr/thumb/0/0d/Logo_OpenClassrooms.png/320px-Logo_OpenClassrooms.png" alt="Logo_OpenClassrooms"></a>
<h2>Mes expériences</h2>
<ul>
<li><strong>De 2011 à 2013 :</strong> BEP MEI (Maintenance des Équipements Industriels)</li>
<li><strong>De 2013 à 2015 :</strong> Bac Pro MEI (Maintenance des Équipements Industriels)</li>
<li><strong>Fin 2017 :</strong> Certificat d'analyste programmeur junior</li>
</ul>
<h2>Mes compétences</h2>
<ul>
<li>HTML / CSS</li>
<li>PHP</li>
<li>MySQL</li>
<li>Javascript (Jquery/Angular)</li>
<li>Java</li>
<li>Python</li>
<li>ABAP (spécifique SAP)</li>
</ul>
<h2>Ma formation</h2>
<p>Depuis 6 mois maintenant, je suis en formation dans une école d'informatique (IPI) en collaboration avec l'entreprise CGI.</p>
</body>
</html>
Et mon code CSS :
body {
background: url(img/background.jpg);
background-size: auto !important;
}
h1 {
font-family: 'Comfortaa', cursive;
}
La propriété background-size à l'air sans effet. J'ai même rajouté un !important mais rien à faire. Même chose pour le "cover" qui ne fonctionne pas non plus.
Je ne sais plus quoi faire...
Merci pour votre aide !
EDIT: En changeant d'image, le background-size est effectif. Ce serait mon image qui pose problème ?
Je ne comprend pas pourquoi. Certes elle est grande, mais et alors ?
Voici mon image (taille 2880 x 1800) : https://htmlcolorcodes.com/assets/images/html-color-codes-color-tutorials-hero-00e10b1f.jpg
En effet ces propriétés devraient fonctionner et des changements devraient se manifester (retire le !auto, inutile à mon sens).
Si tu débutes, je te conseille d'utiliser la console du navigateur sur lequel tu ouvres ta page : clic droit -> inspecter, puis clique sur la balise body dans la console en bas de ton écran. Tu devrais voir les propriétés qui sont affectées au <body>, et tu peux les changer dynamiquement.
Est-ce que ces propriétés sont les seules => body { background: url(img.png); background-size: cover; } ?
Moi ça marche très bien, n'oublie pas les guillemets dans les parenthèse.
Et il y a bug, si tu copie colle directement depuis le site pour mettre dans ton éditeur alors ton éditeur ne vas pas le reconnaître comme espace. Donc à la limite retape tout à la main et d'effacer les espaces que tu as du coller.
En fait efface tout le body dans la partie css, et réécris tout.
- Edité par N.Parvedy 5 juin 2018 à 14:34:05
Plus je fais d'erreurs, plus j'apprends ! Bon, faut quand même faire attention à ce que l'erreur ne soit pas trop grosse ! 😅
En fait je voudrais voir mon image en entier, au format de l'écran. Et pas qu'elle soit coupé. Pour le moment je ne vois que la partie supérieure gauche de mon image à cause de sa taille. Dans l'idéal, je voudrais la voir dans son entièreté et pas uniquement le coin.
Je précise que j'ai déjà écris tout le code à la main, sans copier/coller.
Le problème ne vient pas des guillemets en effet, cela fonctionne très bien sans
Si je comprends ton problème, tu veux une image "responsive"! Tu ne vois que le coin de ton image car elle est grande, de base.
Tu dois donc gérer l'affichage de sorte à ce qu'elle s'adapte à la taille de la fenêtre!
Pour cela, essaye :
background: url(img/background.jpg) no-repeat center fixed;
-webkit-background-size: cover; /* pour anciens Chrome et Safari */
background-size: cover; /* version standardisée */
J'avais essayé le "cover" hier ça n'avait pas fonctionné. Je pense que le combo "no-repeat" "center" "fixed" y est pour beaucoup.
En tout cas ça fonctionne !
Merci beaucoup à vous tous !
La propriété "cover" signifie que l'image va couvrir l'ensemble de la page. Or dans ton cas, elle couvrait déjà l'ensemble de la page du fait de sa grande taille!
Ce que tu voulais c'est le combo des trois propriétés en plus du cover, ce qui permet à l'image d'être responsive
Plus je fais d'erreurs, plus j'apprends ! Bon, faut quand même faire attention à ce que l'erreur ne soit pas trop grosse ! 😅