Cambiar fondo segun resolucion de cada pantalla ?

Juandavo · #1 (**permalink**) 27/03/2013, 08:10

Saludos,
Estoy haciendo una web a partir de una plantilla, lo que necesito es que el fondo se acople a cada resolucion de la pantalla de cada cliente, ahora como es a partir de una plantilla, el fondo está acá:

.bg-main{
width: 100%;
background-color: #fff;
background-image: url(../images/bg-body.jpg);
background-attachment: fixed;
position: relative;
}

Yo ya he editado mi img de fondo que quiero en la web y he puesto el nombre de bg-body.jpg pero no logro hacer que el fondo se acople a cada resolucion de pantalla.

Quiero dejar el : background-attachment: fixed; ya que me gusta que la img se quede estática y la info central si se mueva con el scroll ....

Gracias ..

pzin · #2 (**permalink**) 27/03/2013, 09:58

Puedes usar background-size y ajustar según la necesidad. Algunos ejemplos:

Código CSS:

Ver originalbackground-size: auto 75px;
background-size: 100%;
background-size: contain;
background-size: cover;

cover suele ser la mejor opción si la imagen es suficientemente grande tanto como para adaptarse a todas las pantallas.

Juandavo · #3 (**permalink**) 27/03/2013, 10:38

Gracias !!

Me sirvió !!! :D