Mettre une image de fond à un tableau en onglets

[Kimi Kozuma]

Bonsoir bonsoir.

J'ai une question qui me pose problème de puis une bonne journée.

J'aimerais savoir comment fait-on pour mettre une image de fond à mon tableau en onglets ?

Merci d'avance à qui prendra la peine de m'aider ♥

[ge80]

Bonsoir

Difficile de vous aider sans avoir une idée de votre codage.

Cordialement
ge

[Kimi Kozuma]

Certes xD

En fait je voudrais que mon tableau ai comme fond cette image:

Spoiler:

et voilà le code de mon tableau:

Code:

.paonglet
        {
        display:inline-block;
        margin-left: 2px;
        margin-right:2px;
        padding:5px;
        cursor:pointer;
        background-color: #;
        color: #fff;
        font-size: 14px;

}
        .paonglet_0
        {
        border-radius: 2px 2px 2px 2px;
        -moz-border-radius: 2px 2px 2px 2px;
        -webkit-border-radius: 2px 2px 2px 2px;
        }
        .paonglet_1
        {
          color: #;
          border-radius: 2px 2px 2px 2px;
          -moz-border-radius: 2px 2px 2px 2px;
          -webkit-border-radius: 2px 2px 2px 2px;
        }

        .contenu_paonglet
        {
                margin-top:-1px;
                padding: 2px;
                display:none;
                height: 320px;
        }


Code:

<script type="text/javascript">
        //<!--
                function change_paonglet(name)
                {
                        document.getElementById('paonglet_'+anc_paonglet).className = 'paonglet_0 paonglet';
                        document.getElementById('paonglet_'+name).className = 'paonglet_1 paonglet';
                        document.getElementById('contenu_paonglet_'+anc_paonglet).style.display = 'none';
                        document.getElementById('contenu_paonglet_'+name).style.display = 'block';
                        anc_paonglet = name;
                }
        //-->
        </script><div class="paonglets">
            <span class="paonglet_0 paonglet" id="paonglet_accueil" onclick="javascript:change_paonglet('accueil');">Soul Seoul</span>
            <span class="paonglet_0 paonglet" id="paonglet_effectif" onclick="javascript:change_paonglet('effectif');">News</span>
            <span class="paonglet_0 paonglet" id="paonglet_autre" onclick="javascript:change_paonglet('autre');">Partenaires</span>
<span class="paonglet_0 paonglet" id="paonglet_staff" onclick="javascript:change_paonglet('staff');">Staff</span>
         

        </div>

        <div class="contenu_paonglets">
            <div class="contenu_paonglet" id="contenu_paonglet_accueil">

Contenu page d'accueil

</div>

            <div class="contenu_paonglet" id="contenu_paonglet_effectif">

Contenue effectif

</div><div class="contenu_paonglet" id="contenu_paonglet_autre">

Contenu partenaire

</div>

</div><div class="contenu_paonglet" id="contenu_paonglet_staff">

Contenu staff

</div>
</div>
    <script type="text/javascript">
        //<!--
                var anc_paonglet = 'accueil';
                change_paonglet(anc_paonglet);
        //-->
        </script>

[ge80]

Avez-vous essayé ceci juste après votre paonglet ?

Code:

.paonglet{
 background-image:url(http://i54.tinypic.com/167v3ht.jpg);
}

Si cela ne fonctionne pas : Dans quoi est inséré le script ?

[Kimi Kozuma]

;o; ça marche pas.

Le script est dans Affichage -> généralités

[ge80]

Et en ajoutant ce morceau de code dans votre CSS mais tout à la fin.

Ne pas oublier de valider puis de faire un CTRL-F5 pour un rechargement de votre forum.

Code:


.paonglet_1{
 background-image:url('http://i54.tinypic.com/167v3ht.jpg') !important;
}


Aucune image n'apparait même un court instant ?

[Kimi Kozuma]

;o; c'est toujours pareil

[ge80]

Mince j'ai édité au lieu de répondre !!!!

Et en ajoutant ce morceau de code dans votre CSS mais tout à la fin.

Ne pas oublier de valider puis de faire un CTRL-F5 pour un rechargement de votre forum.

Code:


.paonglet_1{
 background-image:url('http://i54.tinypic.com/167v3ht.jpg') !important;
}


Aucune image n'apparait même un court instant ?

[Kimi Kozuma]

non, il n'y aucune image qui apparait

[ge80]

Donc la suite demain car j'ai trop mal à la tête pour faire cet essai sur un forum de test à moins que quelqu'un, qui a l'esprit plus alerte, ne voit la solution

[Kimi Kozuma]

Merci beaucoup ^_^

[Anzu]

Bonsoir,

Mettez ceci dans votre CSS:

Code:

.contenu_paonglets{
 background-image:url('http://i54.tinypic.com/167v3ht.jpg') !important;
 background-repeat: no-repeat;
 background-position: top center;
}

Cordialement.

[Kimi Kozuma]

'o' L'image s'affiche, Merci ^_^

mais elle est coupée

[Anzu]

Rajoutez dans la CSS que je vous ai donné ceci:

Code:

 height: 561px;


[Kimi Kozuma]

Merci beaucoup, c'est parfait !