J'ai vu ce design web que je voulais essayer de faire .. J'ai fait l'en-tête jusqu'à présent et tout fonctionne à l'exception de l'image de fond. Je n'ai aucune idée de ce qui ne va pas avec mon code .. s'il vous plaît dites-moi ce que je fais mal. Je mets le plein SCSS et le code htmlFond img ne fonctionne pas css
HTML:
<!DOCTYPE html>
<html>
<head>
<title>ClassyDays</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="style/style.css">
<link href="https://fonts.googleapis.com/css?family=Lato:100" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
</head>
<body>
<header>
<h2 id="nav-ico"><i class="fa fa-navicon"></i></h2>
<div id="warp-h">
<h1>CLASSY<span class="gray">DAYS</span></h1>
<h2 class="gray">A classy HTML/Css3 design by <em>my highness</em></h2>
<button>LEARN MORE</button>
</div>
</header>
<!--intro--><section id="sec1"></section>
<!--features--><section id="sec2"></section>
<!--feat-det--><section id="sec3"></section>
<!--seprate--><section id="sec4"></section>
<!--feat-pic--><section id="sec5"></section>
<!--button-sep--><section id="sec6"></section>
<!--team--><section id="sec7"></section>
<!--login--><section id="sec8"></section>
<!--socail-media--><section id="sec9"></section>
<footer></footer>
</body>
</html>
et ceci est mon css (SCRT) Code
//colors
$black: #353535;
$grey: #a1a9b0;
$darkblue: #242830;
$button: #3dc9b3;
$button-shadow: #309383;
//size
$h1: 2em;
$h2: 1.25em;
$body: 1em;
//font (only one)
$font: 'Lato', sans-serif;
* {
}
body {
color: $grey;
font-size: $body;
text-align: center;
font-family: $font;
}
.gray {
color: $grey;
}
h1 {
color: $black;
font-size: $h1;
}
h2 {
color: $black;
font-size: $h2;
}
header {
display:block;
background: url(img/header.png);
width: 100%;
overflow: auto;
#nav-ico {
float: right;
padding: .5 * $body 7 * $body;
:hover {
color: $grey;
}
}
#warp-h {
margin: auto;
padding: 4 * $h1;
}
button {
font-family: $font;
font-size: $body;
padding: .5 * $body $body;
margin: 2 * $body;
border: none;
border-radius: .5 * $body;
background: $button;
border-bottom: 4px solid $button-shadow;
text-align: center;
text-decoration: none;
color: white;
width: 10.25em;
height: 3.5em;
}
}
Je sais que je ne fais pas de lien css erreur car il fonctionne essentiellement sur tout (la couleur, la taille, le remplissage et autres) ni je crois que le problème est avec l'image ou son lien, parce que j'ai changé sa place et l'image elle-même (je mets une image que j'ai utilisée auparavant dans un projet) mais pas J'ai essayé de copier-coller cette ligne de nombreuses fois sur Internet juste au cas où j'ai une faute d'orthographe mais là encore je n'ai pas mal orthographié
EDIT: MERCI! à toute personne intéressée, au fond, j'ai oublié de faire le lien par rapport au fichier css et non le site lui-même
Avez-vous essayé de vérifier l'URL complète de l'image dans la visionneuse de source du navigateur? Essayez d'ajouter une barre oblique avant de rendre le chemin absolu plutôt que relatif. – ElChupacabra
vérifiez la console et voyez l'erreur –
En supposant que tout est comme vous l'avez dit, c'est parce que 'img/header.png' n'est pas correct. Gardez à l'esprit que le chemin doit être relatif au fichier CSS. – Adam