Microsoft - Como logran este efecto en sus páginas

Berletzis · #1 (**permalink**) 07/01/2007, 23:31

Alguien sabe como logran poner un background de este estilo, ajustandose al tamaño del monitoy "resolucion" lo interesante es ke no se scrolea.. sin embargo como logran este tipo de efecto??

http://microsoftatces.com/photos/pho...icture120.aspx
gracias..

Shade · #2 (**permalink**) 08/01/2007, 02:22

Pues simplemente es una imagen en background :S nada mas y nada menos que eso.

Lo unico es que le han creado un repeat-y si no me equivoco para que solamente se repita en el eje Y.

Berletzis · #3 (**permalink**) 08/01/2007, 14:49

ah ok, lo que me dejo algo asombrado es la forma enque lo utilizan ya que no habia visto antes ese tipo de diseño masque en Flash, sin embargo supongo que ya nos podemos dar el lujo de utilizar imagenes asi como background ya que el ancho de banda ya tiende a ser un poco mayor para la mayoria de los usuarios..

Muchas gracias deja investigo un pokito acerca de eso, y luego lo comentamos el background...

ciao

arthpix · #4 (**permalink**) 08/01/2007, 22:02

Pues no, no se repite en Y... es una sola imagen de fondo y la pagina tiene asignado un color de fondo que coincide con el color de la parte inferior de la imagen.
No le veo lo novedoso.

¿Por que no guardas la página en tu disco duro para analizarla y comprobarlo tu mismo?

Saludos.

Daniel Ulczyk · #5 (**permalink**) 08/01/2007, 22:36

Cita:

Alguien sabe como logran poner un background de este estilo, ajustandose al tamaño del monitoy "resolucion" lo interesante es ke no se scrolea.. sin embargo como logran este tipo de efecto??

Mediante CSS:

Código PHP:

  background-image: url(../images/msces/bground-top.jpg);
background-position: top left;
background-repeat: repeat-x;

Es una imagen de 24K que por dimensiones tiene: 1500 x 473px y, ciertamente el background, coincide con el pie de la imagen:

Código PHP:

  background-color: #05497A;

aprender06 · #6 (**permalink**) 09/01/2007, 02:12

Hola Daniel Se ve que dominas mucho el tema de ajustar la web a otras resoluciones, a ver si me puedes aclarar una duda.

Por desconocimiento de CSS tengo toda la web de la siguiente manera por motivos de seguridad, ya se que puede ser rústico pero bueno..
Todo lo que ve el usuario son php que contienen un include a un html.

Si pongo en el php el código que proponer:
background-image: url(../images/msces/bground-top.jpg);
background-position: top left;
background-repeat: repeat-x;

Conseguiré evitar el scrolling del background?

Otro problemilla es muy simple varias imágenes de la web que monto son de cámara digital y si reduzco su tamaño para ajustarlas a una resolución de 800x600 no se aprecia la cara del que aparece en la foto como toca, hay alguna solución, la conclusión a la que he llegado es que es un tema de la foto y que no se puede hacer nada.

Muchas gracias de anteamno!

Daniel Ulczyk · #7 (**permalink**) 09/01/2007, 13:18

Para tales efectos debieras, como en el código original incluir tales declaraciones para el body de la página:

Cita:

body, html
{
margin: 0px;
padding: 0px;
color: #000000;
font-family: Tahoma, Arial, Helvetica;
background-color: #05497A; /* 003f7b msces */
background-image: url(../images/msces/bground-top.jpg);
background-position: top left;
background-repeat: repeat-x;
}

Estas líneas, para quienes no hayan visto el enlace de muestra, están contenidas dentro del archivo common.css
Y, desde el html, se cargan de la siguiente manera:

Cita:

Lo cual, va insertado entre los etiquetas <head></head> del documento.

Cita:

Conseguiré evitar el scrolling del background?

Los chicos de Microsoft, lo consiguieron ¿por qué no?

En cuanto a tu problema con las imágenes, debiera evaluarse que nivel de resolución tienen las mismas, qué tipo de interpolación estás usando y cuanto estás dispuesto a perder con la disminución de las dimensiones.
Si enviás algún enlace de la misma, seguramente alguien con más experiencia y talento podrá aportar también algún consejo.
Saludos!

metacortex · #8 (**permalink**) 10/01/2007, 01:23

Cita:

Iniciado por Daniel Ulczyk

Mediante CSS:

Código PHP:

  background-image: url(../images/msces/bground-top.jpg);

background-position: top left;

background-repeat: repeat-x;

Es una imagen de 24K que por dimensiones tiene: 1500 x 473px y, ciertamente el background, coincide con el pie de la imagen:

Código PHP:

  background-color: #05497A;

Hola. Puedes hacer exactamente lo mismo así:

background: url(../images/msces/bground-top.jpg) top left #05497A repeat-x;

Con respecto a la imagen de fondo, me agrada cómo optimizaron el peso en Kb.

aprender06 · #9 (**permalink**) 10/01/2007, 01:46

Muchas gracias a ambos por compartir la experiencia!
Saludos!

Berletzis · #10 (**permalink**) 11/01/2007, 16:53

Gracias a todos, ciertamente no esta novedoso sin embargo esta bien hecho, y a mi parecer si da otra vista al sitio web.
muchas gracias a todos...