Style CSS : image en arrière plan

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Style CSS : image en arrière plan

adameteve

Salut à tous,

Windows XP Pro - Internet Explorer 6 - Dreamweaver MX 2004

Je suis à mon boulot et je travaille dans Dreamweaver MX 2004. Je ne parviens pas à placer une image gif en arrière-plan de chaque page de mon site (statique), via un style CSS.

J'ai créé une feuille de style CSS VerdanaNoir.css (pour les liens URL et le texte statique) dans laquelle j'ai ajouté un style .Fond dans la catégorie "Arrère-plan".

Le problème c'est que mon image n'apparaît nul part dans mes pages html, alors que les autres styles css fonctionnent bien (liens URL soulignés au passage de la souris, mise en forme du texte statique).

Voici le code de ma feuille de styles :

Code :

.Fond {
background-attachment: fixed;
background-image: url(images/CleSolFondPage.gif);
background-repeat: no-repeat;
background-position: center center;
}
a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
text-decoration: none;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
}
a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
text-decoration: none;
}
a:active {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
text-decoration: none;
}
a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
text-decoration: underline;
}
.VerdanaNoir10 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
}
.VerdanaNoir10Gras {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #000000;
}
.VerdanaNoir12Gras {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
}
.Verdana12GrasBlanc {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
}
.Verdana10GrasBlanc {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #FFFFFF;

Ca fait une heure que je fais des tas d'essais, et je comprends de moins en moins !

Merci d'avance à tous ceux qui pourront m'aider, :jap:
Adam

Publicité

webmidipyrenees

Si au lieu de créer un style .Fond tu le faisais directement dans body ça ne marcherait pas mieux
Ceci donnerait donc

Code :

body {
background-attachment: fixed;
background-image: url(images/CleSolFondPage.gif);
background-repeat: no-repeat;
background-position: center center;
}

---------------
Xavier, administrateur et webmaster de http://www.webmidipyrenees.com

jokool

it's a kool world.

salut,

c'est sur dans le body ça serait mieux mais il veut peut-être l'appliquer à autre chose que le body

sinon bah le code est bon, la seule chose qui pourrait ne pas aller c'est le chemin de l'image, et peut-être les majuscules dan le nom sinon j'vois pas !

---------------
ma gallery photo : http://jokool.free.fr :)

adameteve

Je viens d'essayer et... c'est pire ! Je vois le texte directement dans mes pages html, tout en haut de chaque page.

Une autre solution ?

Merci quand même,
Adam

webmidipyrenees

tu aurais le code complet de la page ou un lien pour qu'on puisse voir exactement ce que tu veux faire

---------------
Xavier, administrateur et webmaster de http://www.webmidipyrenees.com

jokool

it's a kool world.

bah je vois pas, mais sans autres précisions on peut pas faire grand chose.
le CSS est bon, je viens de le tester en local, donc...

fais un test avec une page vierge ou il n'y a que ton fond, pour voir si ça s'affiche.
peut-être que t'as des div avec un fond blanc par dessus !

---------------
ma gallery photo : http://jokool.free.fr :)

adameteve

Je vérifié et pas fond blanc.

Voici le code html d'une page :

Code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Ecole - Présentation</title>
<style type="text/css">
<!--
.Style12 {font-family: Verdana, Arial, Helvetica, sans-serif}
-->
</style>
<style type="text/css">
<!--
.Style13 {font-size: 10px}
-->
</style>
<style type="text/css">
<!--
.Style11 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; }
.Style3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10;
font-weight: bold;
}
.Style4 {font-size: 10}
-->
</style>
<link href="VerdanaNoir.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url();
}
-->
</style></head>
<body>
<table width="800" border="0" cellpadding="3" cellspacing="0">
<tr bgcolor="#FFFF99">
<td height="5" colspan="3" bgcolor="#FFFF99"></td>
</tr>
<tr bgcolor="#FFFF99">
<td width="3" bgcolor="#FFFF99"> </td>
<td width="205"><a href="index.htm"><img src="images/LOGO-CiteDesMusiques_2.gif" width="205" height="44" border="0"></a></td>
<td align="center" valign="middle" bgcolor="#FFFF99"><table border="0" cellpadding="0" cellspacing="0">
<tr align="center" valign="middle">
<td width="50"><span class="Style11"><a href="Ecole_Presentation.htm">Ecole</a></a></span></td>
<td width="1" bgcolor="#000000"></td>
<td width="105"><span class="Style11"><a href="Enseignement.htm">Enseignement</a></span></td>
<td width="1" bgcolor="#000000"></td>
<td width="65"><span class="Style11"><a href="http://www.addim89.org/siteweb/agenda/index.asp" target="_blank">Agenda</a></span></td>
<td width="1" bgcolor="#000000"></td>
<td width="115"><span class="Style11"><a href="Divertissement.htm">Divertissement</a></span></td>
<td width="1" bgcolor="#000000"></td>
<td width="45"><span class="Style11"><a href="FAQ.htm">FAQ</a></span></td>
<td width="1" bgcolor="#000000"></td>
<td width="60"><span class="Style11"><a href="Contact.htm">Contact</a></span></td>
<td width="1" bgcolor="#000000"></td>
<td width="60"><span class="Style11"><a href="Interne.php">Interne</a></span></td>
</tr>
</table></td>
</tr>
<tr>
<td colspan="3"><span class="Style4"></span><span class="Style4"></span>
<table width="700" border="0" align="center" cellpadding="0" cellspacing="0">
<tr align="left" valign="middle">
<td height="80" colspan="2"><span class="Style13 Style12"></span> <table width="700" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="top"><span class="VerdanaNoir12Gras"><strong> <strong>Ecole Nationale de Musique d'Auxerre</strong><span class="Style13 Style12"><strong></strong></span><br>
<span class="Style13 Style12"><strong>--------------------------------------------------------------------------------------------------------------------------------------------</strong></span> </strong></span></td>
</tr>
<tr>
<td height="16" align="left" valign="middle" bgcolor="#9DE7FF"><table border="0" cellpadding="0" cellspacing="0">
<tr align="center" valign="middle">
<td width="138" align="left"><span class="VerdanaNoir10Gras"><a href="Ecole_Presentation.htm"> Présentation de l'école</a> </span></td>
<td width="1" bgcolor="#000000"></td>
<td width="110"><span class="VerdanaNoir10Gras"><a href="Ecole_InscriptionTarifs.htm">Inscription/Tarifs</a></span></td>
<td width="1" bgcolor="#000000"></td>
<td width="105"><span class="VerdanaNoir10Gras"><a href="Ecole_ParentsEleves.htm">Parents d'élèves </a></span></td>
<td width="1" bgcolor="#000000"></td>
<td width="80"><span class="Style11"><a href="Ecole_Professeurs.htm" class="VerdanaNoir10Gras">Professeurs</a></span></td>
<td width="1" bgcolor="#000000"></td>
<td width="70"><span class="VerdanaNoir10Gras"><a href="Ecole_Reglement.htm">Règlement</a></span></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td height="15" colspan="2" align="left" valign="middle" class="VerdanaNoir12Gras"> </td>
</tr>
<tr>
<td width="15" height="15" align="left" valign="middle" class="VerdanaNoir12Gras"><table width="10" height="10" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFCC33">
<tr>
<td></td>
</tr>
</table></td>
<td width="685" align="left" valign="middle" class="VerdanaNoir12Gras">Présentation de l'école</td>
</tr>
<tr>
<td height="9" colspan="2" align="left" valign="top"> </td>
</tr>
<tr>
<td height="15" colspan="2" bgcolor="#FFCC33"><span class="Style12 Style13"><strong>  QUOI ?</strong></span></td>
</tr>
<tr>
<td height="5" colspan="2"></td>
</tr>
<tr>
<td colspan="2" align="left" valign="top"><span class="VerdanaNoir10">L'Ecole Nationale de Musique d'Auxerre propose un enseignement musical complet et attractif pour :<br>
- Pratiquer en amateur pour son plaisir<br>
- ou continuer des études dans un but professionnel et préparer des diplômes nationaux (Diplôme d'Etudes Musicales). </span></td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td height="15" colspan="2" bgcolor="#FFCC33" class="VerdanaNoir10Gras"> POUR QUI ?</td>
</tr>
<tr>
<td height="5" colspan="2" class="VerdanaNoir10"></td>
</tr>
<tr>
<td colspan="2" class="VerdanaNoir10">- Les enfants dès l'âge de 4 ans.<br>
- Les adultes dans la limites des places disponibles. </td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td height="15" colspan="2" bgcolor="#FFCC33" class="VerdanaNoir10Gras"> QUAND ? </td>
</tr>
<tr>
<td height="5" colspan="2" class="VerdanaNoir10"></td>
</tr>
<tr>
<td colspan="2" class="VerdanaNoir10">En dehors des horaires scolaires (surtout le soir, et les mercredi et samedi)<br>
ou durant les horaires scolaires (pour les 6ème et 5ème <em>Musique Plus</em> à horaires aménagées).</td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td height="15" colspan="2" bgcolor="#FFCC33" class="VerdanaNoir10Gras"> COMMENT ? </td>
</tr>
<tr>
<td height="5" colspan="2"></td>
</tr>
<tr>
<td colspan="2" class="VerdanaNoir10">L'élève acquiert une formation complète avec plusierus enseignants de dsciplines complémentaires :<br>
<u>En cours collectifs</u> de formation musicale, analyse, chant choral, ensembles.<br>
<u>En cours individuels et de petits groupes</u> en instrument.<br>
<br>
Les pratiques collectives sont privilégiées (chant choral, musiques de chambre, orchestre).<br>
Les élèves se produisent régulièrement en public (audition, spectacles, concerts) seuls, avec accompagnateur, ou en ensembles orchestres. </td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td height="15" colspan="2" bgcolor="#FFCC33" class="VerdanaNoir10Gras"> CURSUS</td>
</tr>
<tr>
<td height="5" colspan="2"></td>
</tr>
<tr>
<td colspan="2" class="VerdanaNoir10">- Formation musicale (solfège musical) et chant choral sont enseignés dès la première année.<br>
- Les cours d'instrument débutent dès la 2ème année (parfois dès la 1ère année, selon l'instrument).<br>
- Le cursus normal comprend trois cycles de 4 à 5 ans chacun.<br>
- Les acquisitions sont appréciées par évaluation continue (globale, comme la formation), accompagnée d'un examen en fin de cycle. </td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td height="15" colspan="2" bgcolor="#FFCC33" class="VerdanaNoir10Gras"> OÙ ? </td>
</tr>
<tr>
<td height="5" colspan="2"></td>
</tr>
<tr>
<td colspan="2" class="VerdanaNoir10">Tous les cours ont lieu à l'ENM.<br>
<br>
7, rue de l'île aux plaisirs 89000 AUXERRE<br>
(entre le Pont Paul Bert et la Gare SNCF) <br>
<BR>
Tel : Tél : 03.86.18.05.70 <BR>
Fax : 03.86.18.05.72<BR>
Email : <A
href="mailto:enm.mairie@auxerre.com"><STRONG>enm.mairie@auxerre.com</STRONG></A></td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

Merci de votre aide, :jap:
Adam

webmidipyrenees

j'ai peut-être mal vu mais où appelles-tu la classe Fond

---------------
Xavier, administrateur et webmaster de http://www.webmidipyrenees.com

adameteve

Il est inséré dans ma feuille de style "VerdanaNoir.css", ligne 33.

Dans un autre forum on m'a conseillé d'ajouter cette ligne dans mes page html :

Code :

<link rel="stylesheet" type="text/css" media="all" href="VerdanaNoir.css">

Qu'en penses-tu ?

Merci,
Adam

webmidipyrenees

Dans ta feuille de style OK mais dans le code des pages il est appelé où ce style

---------------
Xavier, administrateur et webmaster de http://www.webmidipyrenees.com

Publicité

adameteve

Apparemment nul part. Faut-il qu'il soit appelé de l'extèrieur de la feuille de style ?

Adam

webmidipyrenees

La feuille de style sert à définir le style et après il te faut l'appliquer à certaines balises. Le fait de simplement le définir ne sert à rien et ce n'est pas parce que ça s'appelle fond que ça te met un fond partout

---------------
Xavier, administrateur et webmaster de http://www.webmidipyrenees.com

adameteve

Ok, donc que dois-je faire concrètement ?

J'ai ajouté ce code dans ma balise Head :

Code :

<meta name="dc.description" content="Style CSS : image arrière plan" />
<link rel="stylesheet" type="text/css" media="all" href="ENM/VerdanaNoir.css">

... mais ça ne fonctionne toujours pas. Faut-il ajouter une autre code pour appeler le style .Fond ?

Merci à toi, :jap:
Adam

webmidipyrenees

si tu veux l'appliquer à toute la page il te faut mettre ce que je t'ai donné tout au début.
la classe Fond s'appelle comme les autres (VerdanaNoir10Gras par exemple) en mettant class="Fond" à l'élément dont tu veux appliquer le style et il te faudrait enlever:

Code :

<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url();
}
-->
</style>

Message édité par webmidipyrenees le 11-08-2005 à 16:21:16

---------------
Xavier, administrateur et webmaster de http://www.webmidipyrenees.com

adameteve

Je viens de trouver ! Dans un autre forum, on m'a conseillé de renommer .Fond en .body, comme tu me l'avais conseillé, mais je n'avais pas compris.
Et en fait, j'ai trouvé cette balise "body" qui existait déjà. J'ai simplement entré l'adresse de mon image et ça a marché. Trois heures pour trouver ça !

Merci à toi, tu avais raison.

Mais je ne comprends toujours pas pourquoi je n'ai pas pu faire la même chose en passant par ma feuille de style VerdanaNoir.css.

Merci encore,
Adam

webmidipyrenees

tu aurais pu faire la meme chose en écrivant <body class="Fond" ...> mais ce n'est vraiment pas terrible autant styler directement le body

---------------
Xavier, administrateur et webmaster de http://www.webmidipyrenees.com

FlorentG

:sweat: :sweat:

FORUM HardWare.fr

Graphisme

Web design

Style CSS : image en arrière plan

Sujets relatifs
effet relief/3D sur les contours d'une image?	Texte lien dans image ready
cherche image	Flash , XHTML+CSS, Tableaux, ... Que savoir avant de se lancer ?
ajout d'un lien hypertexte sur une image GIF dans image ready	[Paint Shop Pro 7] Dégradé sur les contours d'une image
[help] format d'image .png illisible	Comment créer un gif animé de ce style ???
Plus de sujets relatifs à : Style CSS : image en arrière plan

Page générée en 0.175 secondes