Mon background-image ne s'affiche pas (HTML - CSS)
Résolu
THOMAS
-
THOMAS -
THOMAS -
Bonjour,
J'étudie actuellement les bases de l'HTML et du CSS.
J'aimerais mettre image en fond sur une seule page de mon site (il s'agit de l'accueil).
J'ai déjà regarder beaucoup de Tuto en suivant les étapes et mettant le même code qu'eux.
Ca ne marche toujours pas.
Voici le code HTML :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset ="utf-8">
<title>LinkedIn</title>
<link rel="stylesheet" href="../CSS/style.css"/>
</head>
<body>
<header class="linovu">
Linovu
</header>
<nav>
<ul class="list">
<li><a href="../accueil/accueil.php" class="menu">Accueil</a></li>
</ul>
</nav>
<section class="acceuil">
</section>
<footer>
<p>Copyrigth 2019 - Danny Thomas</p>
</footer>
</body>
</html>
Voici le code CSS de tout le site:
body
{
font-size: 15px;
font-family : times new roman;
}
.nom
{
color: #20B2AA;
font-weight: bold;
text-align:center;
font-size : 25px;
}
h2
{
color : #20B2AA;
font-size : 20px;
}
aside
{
position: fixed;
margin-top : 10px;
margin-right: 0px;
margin-left:1200px;
margin-bottom:0px;
background:r;
border-radius:9px;
border : 5px solid #C0C0C0;
color : #20B2AA;
}
header
{
position : relative;
text-align:center;
background:#C0C0C0;
margin-bottom: 0px;
margin-right: 0px;
margin-left: 0px;
}
section
{
position:absolute;
margin-left:0px;
margin-top:0px;
}
footer
{
position:static;
background: linear-gradient(#20B2AA,#C0C0C0);
text-align:center;
color : white;
padding-top : 10px;
padding-bottom : 10px;
margin-top : 900px;
}
nav > ul
{
list-style-type:none;
margin-top:0px;
margin-bottom:0px;
padding:0px;
overflow:hidden;
background-color:#C0C0C0;
}
nav > ul > li
{
float:left;
}
li a
{
display:inline-block;
color:white;
text-align:center;
padding: 14px;
text-decoration:none;
}
li a : hover
{
background-color:red;
}
.menu
{
background-color:#20B2AA;
}
div
{
width : 1000px;
}
.linovu
{
font-size: 30px;
text-decoration: none;
color:white;
background:#C0C0C0;
font-weight : bold
}
.acceuil
{
background-repeat : no-repeat;
background-image : url(../image/fond.jpg);
background-position: cover;
}
Merci d'avance pour votre précieuse aide !
Thomas
J'étudie actuellement les bases de l'HTML et du CSS.
J'aimerais mettre image en fond sur une seule page de mon site (il s'agit de l'accueil).
J'ai déjà regarder beaucoup de Tuto en suivant les étapes et mettant le même code qu'eux.
Ca ne marche toujours pas.
Voici le code HTML :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset ="utf-8">
<title>LinkedIn</title>
<link rel="stylesheet" href="../CSS/style.css"/>
</head>
<body>
<header class="linovu">
Linovu
</header>
<nav>
<ul class="list">
<li><a href="../accueil/accueil.php" class="menu">Accueil</a></li>
</ul>
</nav>
<section class="acceuil">
</section>
<footer>
<p>Copyrigth 2019 - Danny Thomas</p>
</footer>
</body>
</html>
Voici le code CSS de tout le site:
body
{
font-size: 15px;
font-family : times new roman;
}
.nom
{
color: #20B2AA;
font-weight: bold;
text-align:center;
font-size : 25px;
}
h2
{
color : #20B2AA;
font-size : 20px;
}
aside
{
position: fixed;
margin-top : 10px;
margin-right: 0px;
margin-left:1200px;
margin-bottom:0px;
background:r;
border-radius:9px;
border : 5px solid #C0C0C0;
color : #20B2AA;
}
header
{
position : relative;
text-align:center;
background:#C0C0C0;
margin-bottom: 0px;
margin-right: 0px;
margin-left: 0px;
}
section
{
position:absolute;
margin-left:0px;
margin-top:0px;
}
footer
{
position:static;
background: linear-gradient(#20B2AA,#C0C0C0);
text-align:center;
color : white;
padding-top : 10px;
padding-bottom : 10px;
margin-top : 900px;
}
nav > ul
{
list-style-type:none;
margin-top:0px;
margin-bottom:0px;
padding:0px;
overflow:hidden;
background-color:#C0C0C0;
}
nav > ul > li
{
float:left;
}
li a
{
display:inline-block;
color:white;
text-align:center;
padding: 14px;
text-decoration:none;
}
li a : hover
{
background-color:red;
}
.menu
{
background-color:#20B2AA;
}
div
{
width : 1000px;
}
.linovu
{
font-size: 30px;
text-decoration: none;
color:white;
background:#C0C0C0;
font-weight : bold
}
.acceuil
{
background-repeat : no-repeat;
background-image : url(../image/fond.jpg);
background-position: cover;
}
Merci d'avance pour votre précieuse aide !
Thomas
A voir également:
- Pourquoi mon image ne s'affiche pas html
- Le clavier de mon telephone ne s'affiche plus - Guide
- Image iso - Guide
- Editeur html - Télécharger - HTML
- Ma clé usb ne s'affiche pas - Guide
- Légender une image - Guide
1 réponse
Hello
Comme ça à première vue, ta section (class="acceuil") est vide, du coup ton background ne peut pas s'afficher... Ajoute du texte au moins (<div>....<p>Exemple</p>...</div>...)
Regarde ici :
https://www.w3schools.com/cssref/pr_background-image.asp
ou encore :
https://www.w3schools.com/htmL/html_images_background.asp
@+
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
Ma réponse t'a un peu aidé ? Si oui, un petit merci... Merci.
Comme ça à première vue, ta section (class="acceuil") est vide, du coup ton background ne peut pas s'afficher... Ajoute du texte au moins (<div>....<p>Exemple</p>...</div>...)
Regarde ici :
https://www.w3schools.com/cssref/pr_background-image.asp
ou encore :
https://www.w3schools.com/htmL/html_images_background.asp
@+
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
Ma réponse t'a un peu aidé ? Si oui, un petit merci... Merci.
THOMAS
Le site m'a aidé ! Merci beaucoup !!!