HTML / CSS - comment avoir une image de fond pour l'ensemble de la table

EDIT: bon il s'avère que c'était les problèmes de navigateur. J'espère que quelqu'un peut fermer, avant de me sortir encore plus de votes négatifs -.-

Je veux une couleur foncée de l'image comme le fond de ma table, avec la police et la frontière des lignes, une couleur claire, dire blanc. Voici mon code HTML

<table>
    <tr>
        <td>blank</td>
         <td>blank</td>
    </tr>
    <tr>
        <td>blank</td>
         <td>blank</td>

    </tr>
    <tr>
        <td>blank</td>
        <td>blank</td>

    </tr>
    <tr>
        <td>blank</td>
        <td>blank</td>
    </tr>
    <tr>
        <td>blank</td>
        <td>blank</td>
    </tr>
</table>

et voici mon CSS

table {
    background:url(../images/bgimage.jpg);
    background-repeat:no-repeat;
    background-position:center center;
    width:180px; 
    height:200px;
    border:1px solid black;
    width:180px; 
    height:200px;   
    }

toutefois, cela ne fonctionne pas et il n'est pas de placer une image sur l'écran. Comment venir? J'ai même essayé en plaçant !important à la fin, comme

background:url(../images/15387_isopropyl_alcohol.jpg) !important;

mais j'ai encore nothnig Est-il censé fonctionner? Si elle l'est, alors je suppose que je vais avoir à passer par l'ensemble de mon code et de voir si quelque chose est incorrect.. Est-il une autre façon de placer une image de fond derrière la table? Je pensais mettre le tableau dans un div, puis en donnant la div de l'image d'arrière-plan et de faire la position absolue mais cela ne fonctionne pas non plus, l'image ne s'affiche même pas pour une certaine raison, encore une fois.

Mauvais chemin vers l'image? D'autres CSS interférer?
Il fonctionne pour moi, probablement vous avez un mauvais chemin sur votre fond d'url. Violon
Vérifiez votre navigateur inspecteur et de voir ce qu'il se passe (peut-être une spécificité de la question ou de chemin d'accès incorrect).
La fermeture d'une question n'a pas immunisé contre downvotes...

InformationsquelleAutor user2719875 | 2013-10-10

3

Essayez de mettre votre table à l'intérieur d'un <div> et de définir l'arrière-plan sur la <div> à la place.

Mise à JOUR:

La div suggestion est tout simplement pour obtenir une solution rapide, mais tout dépend si c'est votre image de référence est le même travail, et aussi ce que vous essayez de faire et pourquoi vous êtes encore à l'aide d'une image de fond dans la première place.

Vous finissez par avoir à forcer un tableau de la même taille que l'image ou la répétition de l'image (qui peut ou peut ne pas être ce que vous voulez) ou de l'utilisation background-size: contain; à l'échelle de l'image afin de l'adapter à l'intérieur de la <div> ou de l'utilisation background-size: cover; à l'échelle de l'image à la taille de la <div>, ces 2 derniers ne fonctionne qu'en plus des navigateurs modernes.

Ce violon exemple résout le tableau à l'intérieur de la largeur et la hauteur que vous avez spécifié. Vous pouvez toujours appliquer l'arrière-plan de l'image à la table, c'est un exemple de le faire avec un emballage <div> de sorte que vous pourriez aussi mettre d'autres éléments en face de l'arrière-plan si nécessaire.

http://jsfiddle.net/wbPpa/6/

html:
```
<div class="theme">
<table class="theme-table">
    <tr>
        <td>blank</td>
         <td>blank</td>
    </tr>
    <tr>
        <td>blank</td>
         <td>blank</td>

    </tr>
    <tr>
        <td>blank</td>
        <td>blank</td>

    </tr>
    <tr>
        <td>blank</td>
        <td>blank</td>
    </tr>
    <tr>
        <td>blank</td>
        <td>blank</td>
    </tr>
</table>
</div>
```
css:
```
.theme-table, .theme {
    height: 200px;
    width: 180px;  
}

.theme-table {
    border:1px solid black;
    table-layout: fixed;

}

.theme {
    background:url(http://placehold.it/180x200);
    background-repeat:no-repeat;
}
```
- C'est une réponse indirecte, mais toujours une solution pour le problème (aussi été ma première pensée) +1
- Pourquoi cette question?
- Quand je l'ai fait,a-t-il l'image est apparue à côté de la table. J'ai ensuite fait les images position absolue, alors la table couverte de l'ensemble de l'image. De toute façon de résoudre ce problème?
InformationsquelleAutor Pricey
0

L'image est probablement de travail, mais de se cacher derrière la table. Essayez de définir td opacité à 0,9 pour voir si l'image de fond s'affiche alors.
```
td {
  opacity: 0.9;
}
```
InformationsquelleAutor Mandy
0

Si vous voulez l'utiliser dans le code html de l'élément, vous pouvez utiliser
```
style="background-image: url(http://yuordomain.com/background.jpg);"
```
InformationsquelleAutor Shai Adler

Vous devez vous connecter pour publier un commentaire.