Discussion :

[Henri88]

Bonjour à tous,

Je souhaite afficher une image (headertorrent.png) dans une <div> du header de mon site Wordpress (http://partenaires2pc2iw.net/).
Pour cela, j'utilise la feuille de style css :
Après avoir envoyé l'image sur le serveur, je rajoute la ligne background-image: url('cheminde-l-image'); dans le fichier css, pour la div concernée.

Le souci c'est que l'image ne daigne pas s'afficher.
Je teste différentes manières depuis 2 heures mais rien n'y fait...

Avez-vous une idée ?

ps: j'ai essayé plein de truc, dont inclure une balise style dans le fichier php... et aussi j'ai mis un chemin relatif pour l'image, puis un chemin absolu...
c'est vraiment incompréhensible, car en théorie tout est juste.

[Azerx]

Bonjour,

background-image: url('cheminde-l-image')

attention, la syntaxe exacte est:

Code css :

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

background-image: url("cheminde-l-image/nom_d_image.extension");

Il faut spécifier le nom de l'image et son extension, par exemple:

Code css :

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

background-image:url("images/image_header.png");

Voir ici

[Henri88]

Bjr Azerx,
Oui bien sûr, chemin+extension du fichier image
je sais, j'ai bien mis comme tu dis mais rien ne s'affiche
(et j'ai remplacé ' par ", mais tjs rien..)
C bizarre non ?

[Invité]

Bonjour,

comment est-on censé trouver une solution, alors que tu ne montres ni bout de code, ni copie d'écran, ni quoi que ce soit d'autre ?
On ne peut que faire des suppositions...

• As-tu essayé d'afficher directement l'image dans le navigateur, pour voir si l'URL est OK ?
• Quel est le bout de code que tu as rajouté dans ton CSS ?
• Quel est l'id de la div où tu souhaites mettre ce background ?
• ... ?

Ca aussi, on doit essayer de deviner ?

[Henri88]

Oui désolé, j'avais juste mis un lien vers le site où l'img est sensée s'afficher..

oui l'img s'affiche en rentrant son Url dans le navigateur :
url img : http:partenaires2pc2iw.net/wp-content/themes/formidable-restaurant/img/headertorrent.png

Code du fichier css :

Code :

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

1
2
3
4
5
#header-inner {
     background-image:url("http:partenaires2pc2iw.net/wp-content/themes/formidable-restaurant/img/headertorrent.png") no-repeat;
    height:252px;
    width:100%;
}

et code du fichier php, avec id de la div :

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
 <!-- header -->
        <header id="header">
            <div id="header-inner">
 
 
 
         <!--<div id="logo">
                    <?php if (of_get_option('corpo_logo_image')) : ?>
                    <a href="<?php echo esc_url( home_url( '/' ) ); ?>" class="logo-img"><img src="<?php echo of_get_option('corpo_logo_image'); ?>" alt="<?php bloginfo( 'name' ); ?>" /></a>
                    <?php else : ?>
                    <!--<h1 id="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?> - <?php bloginfo('description'); ?>" rel="home"><?php bloginfo('name'); ?></a></h1><p class="site_tagline"><?php bloginfo('description'); ?></p>
                    <?php endif; ?>        
                </div>-->
                <!--<div class="cdp-row cdp-formidable">
                    <div class="cdp-col cdp-x1_3 cdp-starsl">
                        <img src="<?php echo get_stylesheet_directory_uri();?>/img/stars.png" width="110" height="30">
                    </div>
                    <div class="cdp-col cdp-x1_3 cdp-wings">
                        <img src="<?php echo get_stylesheet_directory_uri();?>/img/wings.png" width="234" height="45">
                    </div>
                    <div class="cdp-col cdp-x1_3 cdp-starsr">
                        <img src="<?php echo get_stylesheet_directory_uri();?>/img/stars.png" width="110" height="30">
                    </div> 
                </div>-->
                <!-- navigation -->
                <nav id="main-nav" role="navigation">
                    <?php
                    if(has_nav_menu('main-menu')){
                         wp_nav_menu(array(
                            'theme_location'  => 'main-menu',
                            'container'       => false, 
                            'menu_class'      => 'menu', 
                            'menu_id'         => 'main-menu',
                            'echo'            => true,
                            'fallback_cb'     => 'wp_page_menu',
                            'before'          => '',
                            'after'           => '',
                            'link_before'     => '',
                            'link_after'      => '',
                            'depth'           => 0,
                            'walker'          => ''
                         ));
                    }else {
                    ?>
                        <ul class="nav" id="main-menu">
                            <?php wp_list_pages('title_li='); ?>
                        </ul>
                    <?php
                    }
                    ?>
                </nav>
                <!-- END navigation -->
            </div>
        </header>
        <!-- END #header -->

L'id de la div en question est header-inner

[Invité]

background-image:url("http:partenaires2pc2iw.net/wp-content/themes/formidable-restaurant/img/headertorrent.png") no-repeat;

lol... Y'a comme un défaut... et même 2 défauts...

Tu aurais GAGNER BEAUCOUP DE TEMPS (et nous aussi) si tu avais commencé par là !

Code css :

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

background:url("http://partenaires2pc2iw.net/.......................") no-repeat;

Cela dit, comme le dossier "img" est dans le même dossier ("formidable-restaurant") que le fichier CSS, tu peux mettre le chemin RELATIF :

Code css :

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

background:url("./img/headertorrent.png") center top no-repeat;

[Henri88]

Ah oui : le double-slash.. quelle étourderie!
Ca fonctionne.
Merco Jreaux62 !

[Azerx]

Aha effectivement
Pense à cliquer sur