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

Images de fond dans le css du template de base

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:

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

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 ?

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

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

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

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:

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:

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 !

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