web-dev-qa-db-fra.com

L'image de fond CSS ne fonctionne pas

Je ne sais pas ce qui se passe mais il semble que l'image de fond ne se charge pas.

test.html:

<div class="pToolContainer">
     <span class="btn-pTool">
         <a class="btn-pToolName" href="#"></a>
     </span>
     <div class="pToolSlidePanel"></div>
</div>

style.css:

    .btn-pTool{
    margin:0;
    padding:0;
    background-image: url(slide_button.png);
    background-repeat:no-repeat;
    }

    .btn-pToolName{
        text-align: center; 
        width: 26px; 
        height: 190px; 
        display: block; 
        color: #fff; 
        text-decoration: none;  
        font-family: Arial, Helvetica, sans-serif;  
        font-weight: bold; 
        font-size: 1em; 
        line-height: 32px; 
    }

À propos, l'image existe dans le dossier test.html.

htmlcssbackground-image
14
Twidizle

Ajouter "display: block;" dans votre classe .btn-pTool

5
Manny

J'ai fait face à ce problème. Mon html était comme ci-dessous:

<th style="background-image:url('Image.png');">
</th>

J'ai ajouté "& nbsp" comme @shankhan l'avait suggéré et l'image a commencé à apparaître.

<th style="background-image:url('Image.png');">
   &nbsp;
</th>
4
user007

Utilisez la propriété abrégée pour la propriété d’arrière-plan et tapez le nom du dossier dans lequel l’image a été localisée.

.btn-pTool{
    margin:0;
    padding:0;
    background:url("../folder name/slide_button.png") no-repeat; 
            }

.btn-pToolName{
    text-align: center; 
    width: 26px; 
    height: 190px; 
    display: block; 
    color: #fff; 
    text-decoration: none;  
    font-family: Arial, Helvetica, sans-serif;  
    font-weight: bold; 
    font-size: 1em; 
    line-height: 32px; 
}
4
Best website designer

En plus de display:block OR display:inline-block

Essayez de donner suffisamment de padding à votre .btn-pToolName et assurez-vous que vous avez les bonnes valeurs pour background-position

1
Robin Maben

Utilisez celui-ci pour ajouter du fond ---

background-image: url('images-path');

Vous pouvez également ajouter des fonctions de répétition ou de non répétition!

background: url('images-path')   no-repeat 00;
0
user621162

Le moyen le plus simple est de copier et coller cette image d’arrière-plan: url(../slide_button.png); au lieu de background-image: url(slide_button.png);Dans ce cas, nous devons utiliser ../ avant le chemin . Soit vous devez donner le chemin complet ..__ La chose est que, au cas où avant de faire toute modification, effacez simplement l’historique du navigateur, puis actualisez la page.

0
user3750236
<span class="btn-pTool">
         <a class="btn-pToolName" href="#"></a>
     </span>

Essayez d’ajouter display:block à .btn-pTool et donnez-lui une largeur et une hauteur.

De même, dans votre code, tbn-pTool et btn-pToolName n'ont pas de contenu textuel, ce qui peut entraîner leur non affichage.

Vous pouvez essayer de forcer le contenu en eux de cette façon

.btn-pTool, .btn-pToolName {
    content: " ";
}
0
Jose Faeti

@TheBigO, ce n'est pas correct. Les étendues peuvent avoir un arrière-plan/des images (testées dans IE8 et Chrome comme vérification de cohérence).

Le problème est que le fichier a.btn-pToolName est marqué comme suit: block. Cela fait que les navigateurs Webkit n'affichent plus l'arrière-plan dans l'étendue externe. IE semble indiquer à quel point le PO manque.

OP risque que la classe .btn-pTool soit affichée: inline-block pour qu’elle fonctionne comme un hybride span/div (prend l’arrière-plan, mais ne provoque pas de rupture dans la présentation). 

0
Sean

Le code ci-dessous fonctionne. Remplacez le texte entre guillemets simples par le nom de votre image. S'il se trouve dans le même dossier, sinon, ajoutez ../nom de dossier/'votre_nom_fichier 'J'espère que cela vous aidera. 

REMARQUE:

l'utilisation des guillemets simples par la plupart des programmeurs n'est pas conseillée mais je l'utilise et cela fonctionne. De plus, si vous voulez écrire un PHP, vous apprécierez ce qu’il peut faire, c’est-à-dire ajouter l’image de fond automatiquement à partir de la variable, etc.

<html>
<head>
<style type="text/css">
.btn-pTool{
margin:0;
padding:0;
background-image: url('your name of the field');
height:100px;
width:200px;
display:block;
}

.btn-pToolName{
    text-align: center; 
    width: 26px; 
    height: 190px; 
    display: block; 
    color: #fff; 
    text-decoration: none;  
    font-family: Arial, Helvetica, sans-serif;  
    font-weight: bold; 
    font-size: 1em; 
    line-height: 32px; 
    }
    </style>
    </head>
    <body>
    <div class="pToolContainer">
    <span class="btn-pTool"><a class="btn-pToolName" href="#">Test text</a></span>
    <div class="pToolSlidePanel">Test text</div>
    </div>
    </body>
    </html>
0
techspeque
 <span class="btn-pTool">
 <a class="btn-pToolName" href="#"></a>
 </span>

C'est vide. Essayez d’ajouter un espace insécable pour donner le lien et étendre certains contenus:

 <span class="btn-pTool">
 <a class="btn-pToolName" href="#">&nbsp;</a>
 </span>

Il est également intéressant de noter que la spécification CSS indique que vous ne pouvez pas attribuer une image d'arrière-plan à une plage, car les plages ne sont pas des éléments de bloc. Placez le code de l'image d'arrière-plan dans le style de la classe du div, ou utilisez <p> instead of <span>. Certains navigateurs peuvent vous laisser mettre un arrière-plan sur une période donnée, mais tous ne le feront pas (peut-être des versions plus anciennes d'IE).

0
Olhovsky

Vous avez appliqué la classe "btn-pTool" à span qui est un élément en ligne ... donnez-lui display:block et ajoutez également du texte dans la balise<a> et voyez le résultat.

Donnez également à l'image une couleur et une position d'arrière-plan, bien que la position d'arrière-plan par défaut soit la même .. mais essayez de le faire de cette façon

0
Mahima

1.Utilisez ce code dans la feuille de style

body {
  background: URL("slide_button.png");
  background-size: 100% 100%;
  background-repeat: no repeat;

2.Put img et fichier html ensemble dans un seul dossier 3.IF pas travaillé essayez de convertir un fichier png en jpg pour télécharger l'image sur facebook, puis de télécharger cette image de facebook, elle sera automatiquement convertie en jpg et lors de l'envoi de la coche paramètre privé pour que vos amis ne puissent pas voir cette image 4.si ne fonctionne toujours pas imform moi ..

0
user3427015

J'ai essayé votre code et trouvé que si nous mettons background-image: url(image.png); dans btn-pToolName et changeons color:#000000 il affiche l'image en arrière-plan.

mon test css:

           .btn-pTool {
                margin: 0;
                padding: 0;
            }

            .btn-pToolName {
                text-align: center;
                width: 26px;
                height: 190px;
                display: block;
                color: #000000;
                text-decoration: none;
                font-family: Arial, Helvetica, sans-serif;
                font-weight: bold;
                font-size: 1em;
                line-height: 32px;
                background-image: url(defalut.png);
                background-repeat: no-repeat;
            }

et test html:

        <div class="pToolContainer">
            <span class="btn-pTool"><a class="btn-pToolName" href="#">adad</a></span>
            <div class="pToolSlidePanel"></div>
        </div>

J'espère que cela t'aides.

0
Harry Joy