Bg color fijo para diferentes resoluciones

SScott · #1 (**permalink**) 28/09/2012, 18:17

Saludos.

Debido a la proliferación de monitores anchos, se hace más complejo diseñar una web que se vea bien.
Mi pregunta es: ¿cómo puedo lograr que se mantenga un color fijo en el fondo, fuera de la tabla html que me genera Photoshop, y que se mantenga igual ya sea en una resolución un poco mayor a 1024x768 o bien en un monitor ancho?

No logro que en resoluciones mayores a 1024x768 el color/imagen de fondo se vea pareja detrás de la tabla html en resoluciones mayores a esa. ¿Cómo hago eso?

Gracias de antemano por cualquier ayuda.

pzin · #2 (**permalink**) 28/09/2012, 18:33

La solución, que seguro que la hay, dependerá del problema concreto que tengas. No es lo mismo que quieras centrar una imagen, que aparezca a la derecha, etc...

No sé qué es una tabla de Photoshop.

El caso es que deberías plantear tu problema con más exactitud para darte una solución acertada.

SScott · #3 (**permalink**) 28/09/2012, 23:38

Cita:

Iniciado por Bonez

La solución, que seguro que la hay, dependerá del problema concreto que tengas. No es lo mismo que quieras centrar una imagen, que aparezca a la derecha, etc...

No sé qué es una tabla de Photoshop.

El caso es que deberías plantear tu problema con más exactitud para darte una solución acertada.

Gracias Bonez

Cuando diseñas la interfase de una web en Photoshop, este te exporta el diseño en una tabla html, y que contiene dentro el diseño que realizaste. Ahora bien, lo que yo deseo es que la tabla html quede centrada y el color o imagen de fondo fuera de esta tabla, abarque todo el resto del monitor, sin importar que se abra en 1024x768 o en 1200x600 o más.

Quiero evitar hacer un diseño bonito pero que en un monitor ancho quede el cuadro diseñado en PS, y fuera de este un color plano (blanco o el que sea).
Me he explicado mejor? Gracias de nuevo.

pzin · #4 (**permalink**) 29/09/2012, 03:14

Entonces mediante CSS debes de centrar la tabla, y la imagen la pondría de fondo a body de forma centrada.

Código CSS:

Ver originalbody {
    background: #fff url('/imagenes/fondo.png') no-repeat center center;
}
 
#idTabla {
    width: 960px;
    margin: 0 auto;
}

Cambias #fff por el color de fondo que quieras tener cuando ya no alcanza la imagen, claro.

Código HTML:

Ver original<body>
    <table id="idTabla">
        <tr>
            <td>
                ...
            </td>
        </tr>
    </table>
</body>

RoyKeane · #5 (**permalink**) 29/09/2012, 12:35

Lo ideal sería que armes la estructura el sitio a mano, y utiliza CSS para maquetar no tablas.

SScott · #6 (**permalink**) 29/09/2012, 13:30

Bonez: Voy a intentarlo mediante el CSS a ver qué resultados me da. Estaré posteandolo. Muchas gracias.

Roy: Si, quizás sea mejor armar todo manualmente, pero sería mucho más complicado ir colocando los slices de forma manual...