28172 sujets

CSS et mise en forme, CSS3

Je n'arrive pas à mettre background sur mon code

.       
`*
{
margin:0;
padding:0;

}
header
{
background-image: linear-
gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url(/Images/paysage.jpg);
height: 100vh;
background-position: center;
background-size: cover;

}`
Bonjour,
on ne voit pas le reste du code, mais déjà là que fait un header tout seul ? Et je crois, je ne suis pas certain, que si l'on met du linear-gradient, c'est pas pour mettre une image par dessus. On peut par contre mettre un fond en css, au cas où l'image tarde à charger. En tous cas, pour afficher l'image en css, il faut mettre par exemple : 
 .header{
  background-image: url(/Images/paysage.jpg);
        -moz-background-size: cover;	
	-webkit-background-size: cover;
	background-size: cover;
        height: 100vh;}

J'ai ajouté les préfixes, à vérifier s'ils sont toujours nécessaires. Avec le header à mettre dans le html, dans une div.
 <div class="header"></div>

C'est bricolé, c'est juste un exemple pour montrer comment afficher une image en css. Il faut tout remettre en ordre dans les pages.
Bongota a écrit :
Bonjour,
on ne voit pas le reste du code, mais déjà là que fait un header tout seul ? Et je crois, je ne suis pas certain, que si l'on met du linear-gradient, c'est pas pour mettre une image par dessus. On peut par contre mettre un fond en css, au cas où l'image tarde à charger. En tous cas, pour afficher l'image en css, il faut mettre par exemple : 
 .header{
  background-image: url(/Images/paysage.jpg);
        -moz-background-size: cover;	
	-webkit-background-size: cover;
	background-size: cover;
        height: 100vh;}

J'ai ajouté les préfixes, à vérifier s'ils sont toujours nécessaires. Avec le header à mettre dans le html, dans une div.
 &lt;div class="header"&gt;&lt;/div&gt;

C'est bricolé, c'est juste un exemple pour montrer comment afficher une image en css. Il faut tout remettre en ordre dans les pages.


Bonsoir merci pour votre réponse j'ai suivie un tutoriel sur YouTube comme ça je vous laisse le temps de regarder sont code en vous remerciant
https://www.youtube.com/watch?v=byiq45y6_1E
Bonjour,
j'ai regardé le tutoriel, il est bien fait, même sans le son.
En tous cas, chez moi, le bout de code que vous avez proposé, même entouré de ce qu'il faut (balises style, en-tête html) n'affiche pas l'image. Ce que j'ai proposé par contre affiche une image en plein écran. Comme on ne voit pas le html, on ne sait pas où on va.
Si des personnes ici peuvent expliquer comment mettre du linear-gradient par dessus une image background ou l'inverse, je suis preneur, ça peut être utile. Pour le header, j'avais mal vu, il y a bien le { qui va avec, autant pour moi. Smiley confused Chacun agence son code comme il veut , mais on a l'habitude de voir 
header {
blablabla}
Quand on voit un crochet à la ligne plus le code qui suit encore à la ligne, l'œil est parfois dérouté, mais tout ça n'empêche pas de fonctionner.
Bongota a écrit :
Bonjour,
j'ai regardé le tutoriel, il est bien fait, même sans le son.
En tous cas, chez moi, le bout de code que vous avez proposé, même entouré de ce qu'il faut (balises style, en-tête html) n'affiche pas l'image. Ce que j'ai proposé par contre affiche une image en plein écran. Comme on ne voit pas le html, on ne sait pas où on va.
Si des personnes ici peuvent expliquer comment mettre du linear-gradient par dessus une image background ou l'inverse, je suis preneur, ça peut être utile. Pour le header, j'avais mal vu, il y a bien le { qui va avec, autant pour moi. Smiley confused Chacun agence son code comme il veut , mais on a l'habitude de voir 
header {
blablabla}
Quand on voit un crochet à la ligne plus le code qui suit encore à la ligne, l'œil est parfois dérouté, mais tout ça n'empêche pas de fonctionner.


Bonjour merci pour votre message je vous montre mon code HTML en vous remerciant 

  <html>  
<head>
<title>site en construction</title>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
    <head>
    <h1>site en construction</h1>


    </head>


</body>
</html>
Il y a une confusion chez vous entre <head> et <header>
<head> est la balise qui entoure les meta de la page, le title est quelques trucs en plus. Elle n'est pas pointée dans le css. <header> est une balise de titre. Pas title mais le titre du début.
.header que j'utilise est une class (mais un autre nom serait préférable pour éviter la confusion).
Il doit y avoir dans le html une div de la class header pour contenir l'image à afficher. Voici la modification (j'ai mis le css dans le html).
<html>  
<head>
<title>site en construction</title>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
    <header>
    <h1>site en construction</h1>
</header>
<div class="header"></div>
<style>
.header{
  background-image: url(/Image.jpg);
        -moz-background-size: cover;	
	-webkit-background-size: cover;
	background-size: cover;
        height: 100vh;}
</style>
</body>
</html>

En dehors des tutos sur youtube, ce serait une bonne chose de revoir les bases du html.
Bonne journée.
Meilleure solution
Bongota a écrit :
Il y a une confusion chez vous entre &lt;head&gt; et &lt;header&gt;
&lt;head&gt; est la balise qui entoure les meta de la page, le title est quelques trucs en plus. Elle n'est pas pointée dans le css. &lt;header&gt; est une balise de titre. Pas title mais le titre du début.
.header que j'utilise est une class (mais un autre nom serait préférable pour éviter la confusion).
Il doit y avoir dans le html une div de la class header pour contenir l'image à afficher. Voici la modification (j'ai mis le css dans le html).
&lt;html&gt;  
&lt;head&gt;
&lt;title&gt;site en construction&lt;/title&gt;
    &lt;link href="style.css" rel="stylesheet" type="text/css"&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;header&gt;
    &lt;h1&gt;site en construction&lt;/h1&gt;
&lt;/header&gt;
&lt;div class="header"&gt;&lt;/div&gt;
&lt;style&gt;
.header{
  background-image: url(/Image.jpg);
        -moz-background-size: cover;	
	-webkit-background-size: cover;
	background-size: cover;
        height: 100vh;}
&lt;/style&gt;
&lt;/body&gt;
&lt;/html&gt;

En dehors des tutos sur youtube, ce serait une bonne chose de revoir les bases du html.
Bonne journée.


Merci beaucoup pour ta réponse j'ai suivie le tutoriel sur YouTube mais pourquoi chez moi avec le même code cela ne fonctionne pas ?
Sujet clos
Aller à