Background image

miguelgalannunez · #1 (**permalink**) 13/01/2014, 05:54

Hola chicos,

Estoy usando una imagen de fondo de 1400 px width x 1000 px height en mi web www.harveysclothing.com

Como puedo hacer para que esa imagen de ese tamaño se vea igual en todas las resoluciones.. en un portatil de 13" o en uno de 21"..

Tiene que tener algún tamaño en especial o meterle algún código en css??

Gracias chicos

hcrisel · #2 (**permalink**) 13/01/2014, 06:03

Hola Miguel
Espero que esto sea lo que estas buscando

Cita:

<Head>
body{
margin: 0 auto;
overflow: auto;
background-color: RGB(215,201,168);
background-image: URL("caballo.jpg");
background-size: 100% 100%;
background-attachment: fixed;
}
</head>

miguelgalannunez · #3 (**permalink**) 13/01/2014, 08:11

Gracias!! Mira como ha quedado www.harveysclothing.com

Quizás esté un poco estirada, no??

hcrisel · #4 (**permalink**) 13/01/2014, 08:35

Buenisimo que te sirviera!!!
Si deseas cambiar ese color de fondo simplemente busca una paleta de colores y cambia los valores del RGB(000,000,000).

Te deseo lo mejor y hasta la próxima!!!

miguelgalannunez · #5 (**permalink**) 13/01/2014, 08:52

hcrisel tu podrias ayudarme en la misma web a posicionar correctamente el logo en el centro así como la barra de navegación??

Y que cuando se re-escale la pantalla se mantenga en el centro del contenedor negro.. sabes más o menos a lo que me refiero??

Gracias

hcrisel · #6 (**permalink**) 13/01/2014, 09:28

A ver si entiendo...

Con este el Título Principal se acomoda al tamaño del Navegador

Código HTML:

 <p style="text-align:center;">Grupo <strong>USB</strong> Gualeguaych&uacute</p>

Con una imagen debería ser lo mismo pero no lo probé. Fijate de este modo

Código HTML:

 <p style="text-align:center;">Grupo <strong>USB</strong>
Gualeguaych&uacute
<img src='./img01.jpg' width="150px" height="100px">
</p>

Suerte!

miguelgalannunez · #7 (**permalink**) 13/01/2014, 09:35

No no me funciona.. si haces más pequeña la ventana del navegador el logo no se centra con respecto al contenedor negro...

Adbane · #8 (**permalink**) 13/01/2014, 09:55

Código CSS:

Ver originalbody {
    background: url("bg.jpg") no-repeat;
    background-position: 100% 100%;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}

miguelgalannunez · #9 (**permalink**) 13/01/2014, 10:07

Gracias Adbane... pero si te fijas ahora cuando haces scroll hacia abajo, la imagen de fondo también se mueve y se ve cortada la imagen..

Solución??

Muchas gracias!!

hcrisel · #10 (**permalink**) 13/01/2014, 10:12

Bueno hasta acá llego como lo he resuelto, funciona bien...

Código HTML:

<!DOCTYPE html>
<html lang="es-ES">
    <head>
        <link rel="shortcut icon" href="Icono.ico" type="image/x-icon">
        <title>All You Know Is Wrong</title>
        
        <div id='titulo'>
            <div style="text-align:center;">
                <h1>All You Know Is Wrong <img src="./caballo1.jpg" height=90px;> </h1>
                <h3><p style="text-align:center;">Lo mejor para todos Uds.</p></h3>
            </div>
        </div>
    </head>
</html>

Probá de hacerlo en un html aparte de tu página, la imagen que puse es de un caballo de 100px x 100px suerte!!!