Images de fond dans le css du template de base

**y0ussef** · 17/05/2012, 13h15

Bonjour,
J'attaque la couche présentation dans mon application SF2 et j'ai un soucie avec le chemin d'une image de fond. Mon fichier base.html.twig se trouve dans /app/Resources/views et j'ai créé un fichier /web/css/style.css. Ce fichier fait appel à des images de fonds que j'ai mis dans /web/images

Voici un exemple d'une image que je n'arrive pas à appeler :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
#header{
background:url("../images/header_bg.jpg") repeat-x;
height:43px;
}

Je ne sais pas comment faire si vous pouvez m'aider je serais reconnaissant

Merci beaucoup

**Francesco34** · 17/05/2012, 13h52

Bonjour,

Je ne vois pas de raison pour que cela ne fonctionne pas.

As-tu vérifier qu'il n'y a pas d'erreurs d'orthographe ? Que le fichier css est bien appelé ? As-tu essayé de mettre une couleur de fond au cas où l'image n'est pas trouvée ? As-tu vidé ton cache ?

**y0ussef** · 17/05/2012, 14h27

Merci pour ta réponse, oui exactement j'ai fait tout cela et malgré ça ça ne fonctionne pas

Et en fait le fichier css est appliqué mais pas l'image du bg!

**Francesco34** · 17/05/2012, 15h09

Et la couleur de fond au cas où l'image n'est pas trouvée s'affichait ?

**y0ussef** · 17/05/2012, 16h31

J'ai essayé de tout refaire et malheureusement la feuille de style n'est plus appliquée. Le template base.html.twig est héritée mais la feuille css n'est pas appliquée

Voici mes 2 fichiers :
Le base.html.twig dans app/Resources/views/

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
{% block stylesheets %}
   <link href="{{ asset('css/screen.css') }}" type="text/css" rel="stylesheet" />
{% endblock %}
 
</head>
 
<body>
<div id="header"> 
	<div id="head">
    	<ul>
        	<li id="active"><a href="#">Tâches</a></li>
        	<li><a href="#">Entreprises</a></li>
        	<li><a href="#">Personnes</a></li>
            <li><a href="#">Utilisateurs</a></li>
        </ul>
	</div><!--end head-->    
</div><!--end header-->
 
 
<div id="container">
{% block container %}	
 
{% endblock %}   
</div> <!--end container-->
<div id="footer">
<div id="foot">
	<div class="footer_menu">
    	<ul>
        	<li><a href="#">Tâches</a></li>
        	<li><a href="#">Entreprises</a></li>
        	<li><a href="#">Personnes</a></li>
            <li class="last"><a href="#">Utilisateurs</a></li>
        </ul>
    </div><!--end footer_menu-->
 
 
    <div class="copyrights">
    	<span>Sortirplus | BigM 2012 © All rights reserved.</span>
    </div><!--end copyrights-->
</div><!--end foot-->
</div><!--end footer-->
</body>
</html>

Et la feuille de style screen.css dans /web/css/

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
* { margin:0; padding:0; }
@font-face{
font-family:MyriadPro;
	src:url(fonts/MYRIADPRO-REGULAR.OTF);
}
 
body{
background:#6f7271;
}
#container{
width:979px;
height:706px;
margin:0 auto;
background:#6f7271;
}
 
#header{
background:url(images/header_bg.jpg) repeat-x;
height:43px;
}
 
 
#head{
width:979px;
height:43px;
margin:0 auto;
}
 
#head ul{
margin-top:15px;
float:left;
list-style:none;
}
 
#head ul li{
float:left;
line-height:12px;
margin-right:41px;
padding-right:49px;
border-right: #7e7f7e solid 1px;
}
 
#head a:link{
color:#ffffff;
text-decoration:none;
font-family:MyriadPro;
font-size:15px;
}
#head a:visited {
color:#ffffff;
text-decoration:overline;
}
#head a:hover{
background:#ffffff;
color:#636564;
height:40px;
padding:0 10px;
border-radius:8px;
}
#footer{
background:url(images/footer_bg.jpg) repeat-x;
height:74px;
}
 
#foot{
width:979px;
height:74px;
margin:0 auto;
}
 
#foot .footer_menu{
height:28px;
 
}
#foot .footer_menu ul{
margin-top:15px;
float:left;
list-style:none;
}
 
#foot .footer_menu ul li{
float:left;
line-height:12px;
margin-right:8px;
padding-right:8px;
border-right: #a22e54 solid 1px;
}
 
#foot .footer_menu ul li.last{
border-right: none;
}
 
#head .footer_menu ul li.last{
border-right: none;
}
 
#head ul li.last{
border-right: none;
}
 
#foot a:link{
color:#a22e54;
text-decoration:none;
font-family:MyriadPro;
font-size:13px;
}
#foot a:visited {
color:#a22e54;
text-decoration:overline;
}
#foot a:hover{
color:#a22e54;
text-decoration:underline;
}
 
#foot .copyrights{
margin-top:10px;
color:#a22e54;
text-decoration:none;
font-family:MyriadPro;
font-size:13px;
float:left;
heigh:28px;
line-height:12px;
}

J'ai beau tourné le problème dans tous les sens je n'y arrive pas... Merci d'avance !

**y0ussef** · 17/05/2012, 16h56

Réglé, en fait c'était juste une question de permissions dans linux

Images de fond dans le css du template de base [2.x]

Symfony PHP

Vue hybride

Discussions similaires

Partager

Partager