HTML / CSS – cómo tener una imagen de fondo de toda la tabla

EDIT: bueno resulta que era problemas del navegador. Esperemos que alguien puede cerrar este antes de llegar aún más votos negativos -.-

Quiero un color oscuro de la imagen como el fondo de mi mesa, con la fuente y las líneas de borde a ser de un color claro, dice blanco. Aquí está mi código 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>

y aquí está mi 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;   
    }

sin embargo, esto no está funcionando y no es la de colocar cualquier imagen en la pantalla. ¿Cómo ven? Incluso traté de colocar !importante en el final, como así

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

pero todavía tengo nothnig Se supone que funciona? Si es así, entonces creo que me va a tomarse para ir a través de toda mi código de nuevo y ver si algo está mal.. hay otra manera de colocar una imagen de fondo detrás de la mesa? Yo estaba pensando en poner la mesa en un div y, a continuación, dar el div con una imagen de fondo y, a continuación, haciendo que la posición absoluta, pero que no funciona bien, la imagen no aparecen por alguna razón otra vez.

  • Camino equivocado a la imagen? Otras CSS interferir?
  • A mí me funciona, problably tiene un camino equivocado en su fondo url. el Violín
  • Verificación de su navegador inspector y ver lo que está pasando (podría ser una especificidad del problema o la ruta de acceso incorrecta).
  • El cierre de una pregunta no la hace inmune a los downvotes…
InformationsquelleAutor user2719875 | 2013-10-10

3 Kommentare

  1. 3

    Tratar de poner la mesa en el interior de un <div> y establecer el fondo de la <div> lugar.

    ACTUALIZACIÓN:

    La div sugerencia fue sólo para obtener una solución rápida, pero todo depende de si la imagen es de referencia, incluso, de trabajo y también es lo que tu tratando de hacer y por qué son incluso usando una imagen de fondo en el primer lugar.

    Usted termina encima de tener a la fuerza de una mesa para que sea el mismo tamaño de la imagen o repetición de la imagen (que puede o no puede ser lo que usted quiere) o el uso background-size: contain; a la escala de la imagen para que quepa dentro de la <div> o uso background-size: cover; a la escala de la imagen al tamaño de la <div>, estos últimos 2 sólo funciona en los navegadores más modernos.

    Este violín ejemplo de las correcciones de la tabla dentro de la anchura y altura especificadas. Usted todavía puede solicitar la imagen de fondo para la tabla, este es un ejemplo de hacerlo con una envoltura <div> así que también podría poner otros elementos en frente de la de fondo si es necesario.

    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;
    }
    • Esta es una respuesta indirecta, pero sigue siendo una solución para el problema (también fue mi primer pensamiento) +1
    • ¿Por qué importa esto?
    • Cuando hice eso,la imagen apareció al lado de la mesa. Luego hice las imágenes de posición absoluta, a continuación, la mesa cubierta la totalidad de la imagen. Alguna manera de arreglar esto?
  2. 0

    La imagen es probablemente de trabajo, pero que esconde detrás de la mesa. Prueba a configurar el td opacidad a 0,9 para ver si la imagen de fondo muestra a continuación.

    td {
      opacity: 0.9;
    }
  3. 0

    Si quieres usarlo en el elemento html, puede utilizar

    style="background-image: url(http://yuordomain.com/background.jpg);"

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea