Comment afficher une image dans le header de mon site ?

Version imprimable

18/04/2016, 21h42
Henri88

Comment afficher une image dans le header de mon site ?

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.
19/04/2016, 09h26
Azerx

Bonjour,

Citation:

Envoyé par Henri88

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

attention, la syntaxe exacte est:

Code:

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:

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

Voir ici ;)
19/04/2016, 17h33
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 ?
19/04/2016, 17h41
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 ? :weird:

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:

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:

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

19/04/2016, 20h14
Invité

Citation:

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... :roll:

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

Code:

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:

background:url("./img/headertorrent.png") center top no-repeat;
19/04/2016, 21h34
Henri88

Merci!

Ah oui : le double-slash.. quelle étourderie!
Ca fonctionne.
Merco Jreaux62 !
;)
20/04/2016, 09h33
Azerx

Aha effectivement :ptdr:
Pense à cliquer sur :resolu: :P