18041 sujets

Questions générales et questions de débutants

CSS image de fond qui ne s'applique pas partout

Bonjour,

Je débute en HTML et j'ai un problème : je souhaitais mettre une image en fond, que j'ai placé dans le fichier CSS, dans body:

body {
background-color:#333333;
color: #A1312E;
font:normal 12pt Tahoma;
background-image:url(cadre_page2.png);
background-repeat:no-repeat;
background-position:50% 700%;
background-attachment: scroll;
}


Normalement, cette image devrait apparaître sur toutes mes pages, mais elle ne s'affiche que sur la première page (la page d'accueil).
Une chose est sûre : l'image s'affiche et fonctionne comme je le souhaite, simplement je voudrais qu'elle soit visible sur tous les fonds de toutes mes pages !

Quelqu'un aurait une explication et/ou une solution ?

Merci d'avance

Jaina
Bonjour,

Cela devrait théoriquement être le cas, auriez-vous une page en ligne que l'on puisse regarder cela de plus près ?
Bonjour,
Ton CSS est bien appelé partout ?
Sinon, dans l'immédiat, je ne vois pas... Tu as bien séparé le CSS et le HTML ? Si ce n'est pas le cas et que tes styles sont dans tes fichier HTML, alors peut-être ne sont-ils pas au même niveau ?
Bonjour,

Merci pour votre réponse.
Hélas non, je n'ai rien en ligne, c'est en fait un site que je dois faire dans le cadre de ma formation ^^'

En fait, mon idée était d'avoir un cadre autour de ma div qui contient tout le contenu de la page. J'ai donc fait une image transparente avec un cadre.
J'ai tenté au départ de mettre l'image dans le html (et pas le CSS), mais du coup plus rien n'était accessible sur ma page car l'image recouvrait tout. Je ne sais pas si je suis vraiment claire !
Oui oui j'ai bien un fichier css séparé de mes pages html. Tout ce que j'ai fait dans ce css s'est bien appliqué partout jusqu'à présent, il n'y a que cette image de fond qui s'applique seulement à la première page.
Modifié par Jaina (18 Apr 2013 - 17:16)
Question bête : Vous n'avez pas oublié la balise body sur la page en question ?...
Sinon, vous ne disposez pas d'un petit espace personnelle sur le web (gracieusement offert par votre fournisseur d'accès internet)? un hébergeur gratuit ? Un éditeur de code en ligne (Dabblet, Codepen) ?...
Au pire vous pouvez poster votre code ici (en le simplifiant et en le balisant avec la colorisation syntaxique Smiley cligne )
Oui j'ai bien le body dans toutes mes pages.

Voici ma première page :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><link href="logo-got.png" type="image/png" rel="icon" />

<head>
<meta charset="UTF-8" />

<title>Titre</title>

<link type="image/png" rel="icon"          href="favicon.png" />  
<link type="image/png" rel="shortcut icon" href="favicon.png" />  

<link rel="stylesheet" type="text/css" href="lea-html.css" title="lea-html-css">
<link rel="stylesheet" type="text/css" href="cssmenu.css" title="lea-html-css">

<script type="text/JavaScript" src="JavaScript/ClientMenuIncluder.js"></script>

</head>
 
<body>
<a id="haut"></a>
<div id="page">

<div align="right"><a href=Page1FR.html><img align="right" src="logo_drapeau_francais.gif"/></a></div>
<div align="center"><img src="bannière2.png"width="900" height="180"></div>

<div id='cssmenu'>
</div>

<script LANGUAGE="JavaScript">
ClientMenuIncluder( 'cssmenu', 'cssmenu_include.html' );
</script>
<h1> Titre </h1>

<div width="950" height="900" style="background-image">
<img src="game_of_thrones_brush_set_by_wolf_2.png" width="700" height="700">
<div class="float-left" id="div3"><h3> <u><strong> The story </strong></u> </h3>
<p style="text-align:justify"; style="position: absolute"> 
Corps du texte
</p>
</div>
</div>

<a href="#haut"><img src="back_haut_page.png"></a>

<footer id="footer">
<h6 align="center">  nom du site </h6>
</footer>

</div>

</body>

</html>


Et ma page 2 : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><link href="logo-got.png" type="image/png" rel="icon" />

<head>
<meta charset="UTF-8" />

<title>Titre</title>

<link type="image/png" rel="icon"          href="favicon.png" />  
<link type="image/png" rel="shortcut icon" href="favicon.png" />  

<link rel="stylesheet" type="text/css" href="lea-html.css" title="lea-html-css">
<link rel="stylesheet" type="text/css" href="cssmenu.css" title="lea-html-css">

<script type="text/JavaScript" src="JavaScript/ClientMenuIncluder.js"></script>

</head>
<body>
<a id="haut"></a>

<div id="page">
<br>
<div><a href=Page2FR.html><img align="right" src="logo_drapeau_francais.gif"/></a></div>

<h1>Titre</h1>
<div id='cssmenu'>
</div>

<script LANGUAGE="JavaScript">
ClientMenuIncluder( 'cssmenu', 'cssmenu_include.html' );
</script>


<div>
<div class="float-left">
<img src="6033243060_6986b19cd4_z.jpg" width="300" height="400" />
</div>

<p align="center">
Corps du texte
</p>

<a href="#haut"><img src="back_haut_page.png"></a>

<footer id="footer">
<h6 align="center">  nom du site </h6>
</footer>

</div>
</body>
</html>



Et dans mon CSS j'ai bien tapé :

body {
background-color:#333333;
color: #A1312E;
font:normal 12pt Tahoma;
background-image:url(cadre_page2.png);
background-repeat:no-repeat;
background-position:50% 700%;
background-attachment: scroll;
}
Modifié par Jaina (18 Apr 2013 - 18:58)
Bonjour,

J'ai essayé de voir ou étaient mes erreurs. Je ne comprend pas tout... Il me dit que pour certaines balises, je ne devrais pas les utiliser dans ce type de document (<head> par exemple) alors que en html, il me semble que je peux les utiliser...

En tout cas, je ne vois rien qui cloche pour ce qui concerne mon image de fond!
Sujet clos
Aller à