Résolu Background-image et css

  • Auteur de la discussion DePhil
  • Date de début

DePhil

Expert
Bonjours à tous:
J'ai un petit souci avec une instruction css (background-image) qui ne fonctionne pas (malgré de nombreuses et diverses tentatives) lorsqu'elle est incorporée à mon fichier css mais qui fonctionne parfaitement lorsqu'elle est incorporée à la balise body de ma page html.
Auriez-vous une idée ?
Voici les codes:
Dans mon css
Code:
body
    {
    [b]/* background-image:url("fond_page.jpg"); Ne fonctionne pas !*/[/b] 
    background-repeat:repeat;
    background-attachment:fixed;
    margin-top:15px;    
    padding:0px;
    margin-bottom:15px;
    font-size:13px;
    /* background-color:#CCCCCC; */
    font-family:Times New Roman, sans-serif;
    }
Dans mon html
Code:
<body style="background-image:url(fond_page.jpg);">
 

LudoTools

Expert
Bonjour,

En CSS, il vaut mieux écrire:
[cpp]
body {
background: #123456 url(./dossier/image.gif) repeat left top;
background-attachment: fixed;
...
}
...
[/cpp]

Au passage, tu remarqueras que le nom de l'image n'est pas entre guillemets !

A+
 

DePhil

Expert
Merci pour ta réponse.

Avant de poser ma question, j'avais fait un petit tour sur différents sites traitant du sujet. J'y ai lu l'instruction background-image écrite de différentes façons: avec double cotes, avec simple cotes et sans cotes (comme tu le préconises). J'avais, bien entendu, tenté toutes les options possibles sans que cela ne donne de résultat.
J'ai suivis ton conseil en modifiant l'instruction css comme ceci :

Code:
body
  {
    [b]background: #123456 url(fond_page.jpg) repeat left top;[/b]
    /* background-repeat:repeat; */
    background-attachment:fixed;
    margin-top:15px;    
    padding:0px;
    margin-bottom:15px;
    font-size:13px;
    /* background-color:#CCCCCC; */
    font-family:Times New Roman, sans-serif;
    }

Bien entendu, j'ai masqué l'instruction background-image implémentée dans le fichier html.
Le seul résultat est l'apparition d'un background couleur, ce qui était déjà le cas avec l'utilisation de la fonction background-color. Mais toujours pas d'image de fond.
(Petite précision, les 3 fichiers css, html et jpg sont au même niveau d'arborescence).
 

zeb

Modérateur
Salut,

Merci de lire, d'accepter et de respecter le règlement. Toute pièce de code doit être présentée entre les balises
Code:
 ... [[i]/[/i]code].
[:zeb:6]

[center][img]http://site.voila.fr/zulu-echo-bravo/img/balisecodeppc_ok.png[/img][/center]
 

LudoTools

Expert
Meilleure réponse
'lut,

#123456 pour la couleur, c'était juste un exemple... à toi de mettre ce que tu souhaites !

Ton image... elle fait quel poids ?, quelles sont ses dimensions ?... et surtout, existe-t-elle à la racine de ton serveur ?
En effet, tu n'indiques pas de chemin vers fond_page.jpg, ce qui sous-entend qu'elle est enregistrée à la racine du serveur, là où sont stockés les fichiers html et/ou php...

Jettes un oeil aux cours sur le CCS... c'est toujours très utile pour apprendre à simplifier le code
[cpp]body {
background: #123456 url(fond_page.jpg) repeat left top;
/* background-repeat:repeat; */A SUPPRIMER
background-attachment:fixed;A SUPPRIMER
margin-top:15px;
padding:0px;
margin-bottom:15px;
font-size:13px;
/* background-color:#CCCCCC; */A SUPPRIMER
font-family:Times New Roman, sans-serif;
}[/cpp]
En 4 lignes...
[cpp]body {
background: #123456 url(./fond_page.jpg) repeat fixed left top;
margin:15px 0px;
padding:0px;
font: normal normal normal 13px/1.2em Times New Roman, sans-serif;
}[/cpp]
;)
 

DePhil

Expert
On ne donne jamais assez de précisions sur la situation existante.
Voilà donc mon domaine de travail.
Tout se passe dans un répertoire local (ma machine) sur laquelle je mets au point une révision de mon site personnel qui ne contient que du html, du css et du java.
Le poids de l'image en question est minuscule (7 Ko)
Par contre j'ai commis une petite bévue en prétendant que, tout comme les deux autres fichiers concernés, mon fichier css se trouvait à la racine de ce répertoire. Car, en réalité, il se trouve dans un sous-répertoire nommé "Style" (où réside mes fichiers de style).
La solution était là.
En effet: l'image était à référencer à partir de l'adresse du fichier css et non à partir de l'adresse du fichier html.
Dès lors, ma ligne de commande doit s'écrire comme ceci (tout en respectant les prescrits déontologiques):
Code:
body
	  {
    background-image:url(../fond_page.jpg); (pour remonter du niveau Style à la racine)
    background-repeat:repeat;
    background-attachment:fixed;
    margin-top:15px;    
    padding:0px;
    margin-bottom:15px;
    font-size:13px;
    /* background-color:#CCCCCC; */ (que je conserve en commentaire)
    font-family:Times New Roman, sans-serif;
    }
Et cette fois: bingo !
LudoTools, merci pour tes interventions, elles m'ont permis d'y voir clair.
 

LudoTools

Expert
:sol: tant mieux ! "On" est là pour ça...

Mais quand même... regarde donc côté simplification du CSS... c'est toujours ça de ligne en moins à interpréter.

Bon développement,
apluch' :)
 

DePhil

Expert
OK, merci pour le conseil.
Toutefois je ne prétends pas être suffisamment aguerri pour consigner mes codes autrement que de façon académique avec pour objectif, un projet réalisé en simple dilettante. Maintenant que celui-ci est bien en place et a une certaine notoriété de par son contenu, je m'attache un peu plus à son enveloppe.
Les questions ne vont pas manquer à commencer par celle-ci à laquelle j'ai trouvé une réponse (sur je ne sais plus quel site) mais pas la solution.
Code:
/* ATTENTION :
Le seul attribut de mise en forme qui reste dans le marquage de la page est l'attribut cellspacing (espacement des cellules) de la balise <table>. Pour autant que je sache, il n'y a aucun moyen de contrôler cet attribut particulier avec CSS. Logiquement, l'espacement des cellules semble correspondre aux marges dans le modèle CSS, mais la modification de l'attribut marge des cellules n'a aucun impact sur leur espacement au sein d'un tableau.
border-collapse:separate; avec border-spacing:10px; ne fonctionne pas */


table /* pour toutes les tableaux */
    {
    /* border-collapse: collapse; /*-> bordures collées */
    style-border: none; /* pas de bordures affichées */
    margin:0px; 
    border-spacing:10px;
    }
Foutus css...
 

DePhil

Expert
Oui, c’est à essayer.
Par contre, c’est dans la page html, au niveau de la balise <table> qu’est la solution de rechange (qui manque toutefois de souplesse).
 

LudoTools

Expert
'lut !

Ceci fonctionne parfaitement... border-spacing à le même effet que cellspacing en hteumeuleu :)
[cpp]<html>
<head>
<style type="text/css">
table, th {
border-collapse:separate;
border-spacing:20px;
border:1px solid black;
}

td {
border:1px dotted red;
padding:5px;
}
</style>
</head>

<body>
<table>
<tr>
<th>Colonne 1</th>
<th>Colonne 2</th>
<th>Colonne 3</th>
</tr>
<tr>
<td>Cellule 1.1</td>
<td>Cellule 1.2</td>
<td>Cellule 1.3</td>
</tr>
<tr>
<td>Cellule 2.1</td>
<td>Cellule 2.2</td>
<td>Cellule 2.3</td>
</tr>
<tr>
<td>Cellule 3.1</td>
<td>Cellule 3.2</td>
<td>Cellule 3.3</td>
</tr>
</table>
</body>
</html>

[/cpp]

Mais bien sûr, si tu indiques border-collapse: collapse ... et bien les bordures sont collées, comme demandé !
Donc border-spacing n'a aucun effet ; ce qui est logique, puisqu'on les veut collées, elles ne peuvent pas être espacées de 20px...

Quant à padding au niveau de la cellule, cela ne fait que ce que ça doit faire... mettre un "padding" (un espace à l'intérieur de la cellule entre son bord et son contenu...).
 

DePhil

Expert
Mais bien sûr, si tu indiques border-collapse: collapse ... et bien les bordures sont collées, comme demandé !
Je n'en disconviens pas. C'est pourquoi la ligne incriminée est en commentaire.
De plus, mon souhait était de passer le paramètre via css (question souplesse) et non de l'indiquer dans le code html. Comme cela ne fonctionne pas, j'ai dû implémenter cellspacing dans la balise <table>. C'est toutefois un moindre mal dans la mesure où je ne pense pas devoir modifier ce paramètre (qui se répète tout de même sur plus de 200 pages…)
 

LudoTools

Expert

oui... mais
table /* pour toutes les tableaux */
{
/* border-collapse: collapse; /*-> bordures collées */
style-border: none; /* pas de bordures affichées */
là, il y a une erreur de saisie... c'est peut-être pour cela que ça ne fonctionne pas...
 

DePhil

Expert
là, il y a une erreur de saisie... c'est peut-être pour cela que ça ne fonctionne pas...
Dans le code, l'ensemble est pourtant bien pris en commentaire. Si j'ai bonne souvenance, un commentaire ouvrant (/*) ne réagit qu'au seul commentaire fermant (*/).
Ensuite, ce code a été mis en commentaire après de multiples essais.
 

DePhil

Expert
Quoi qu'il en soit, mon souci était ailleurs et je te remercie pour l'aide que tu as apporté afin de le résoudre.
 
Vous devez vous inscrire ou vous connecter pour répondre ici.
Derniers messages publiés
Statistiques globales
Discussions
730 079
Messages
6 716 703
Membres
1 586 247
Dernier membre
MrAzgarIII
Partager cette page
Haut