Publicado:

12345678910111213141516171819202122232425262728293031
Ene Feb Mar Abr May Jun Jul Ago Sep Oct Nov Dic
200520062007200820092010201120122013

Comentarios:

0 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527
☺ Si te gusta el contenido de este sitio, puedes aportar para seguir desarrollando y compartiendo.
☺

Categorías

Tags

Tip Precoz: Background al 100% con CSS3

Entramos en una era donde cada vez más podemos aprovechar las bondades de CSS3 sin tener que parchar funcionalidad con scripts y plugins de JavaScript. En esta ocasión, utilizaremos una propiedad CSS3 para hacer que una imagen de fondo cubra el 100% de la ventana, escalándose hasta adaptarse. Afortunadamente los browsers están aplicando suavizado a los elementos por defecto, y en general la imagen no debería de verse (muy) pixelada (si está en una resolución decente y bien optimizada, claro).

background-size: cover;

Esta propiedad (anexa) de background permite hacer lo que necesitamos. Lamentablemente estamos en una etapa en que los estándares y quienes los implementan no se ponen del todo de acuerdo y debemos utilizar esos molestosos prefijos, pero fuera de eso funciona de maravilla.

body {
   background: url('../img/thai.jpg') center center no-repeat;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   background-size: cover;
}

Ver ejemplo

Soporte: Safari, Chrome, Firefox 3.6+, IE9+, Opera10+

Sobre el Autor: Jorge Epuñan

Soy quien escribe en este sitio: diseñador gráfico de profesión, desarrollador web por preferencia y amante de la interacción humano-computador. Cuando no pienso en web, salgo a trotar por mis barrios en Santiago, Chile o me junto con amigos a un bar a conversar sobre nuevas tendencias y tecnologías. Twitter profesional y personal, además del Contacto.

Relacionados

IE v/s console

13/06/2013

0

¿Cansado de soportar IE? Te entiendo, pero aún hay clientes que piden que sus proyectos se vean en estos browsers antiguos. Frustraciones aparte, cuando escribes Javascript y usas console.log() para debuggear tu código en la consola del browser, es usual que éstas funcionalidades se quiebren en IE8-. console.log(‘IE8- dará error por esto’); Solución 1 window.console [...]

➜

Aceleración por hardware con CSS3

17/05/2012

1

La mayoría de los browsers modernos (Chome 10+, Firefox 4+) usan la tarjeta gráfica para ayudar a las animaciones que son más difíciles de renderizar (WebGL hace uso por defecto de esta memoria, por eso corre tan bien en computadores capaces). Si estás haciendo animaciones y transformaciones varias utilizando CSS3, existe un truco para engañar [...]

➜

Desarrollos Web para iPhone

10/07/2008

23

Desde hace unos meses CSSLab tiene un theme especial si entras a través de un iPhone. Y ante la inminente llegada de este codiciado aparato al resto del mundo, he entrado de lleno estudiando desarrollos para esta plataforma. Los aplicativos me la están ganando, ya que se hacen con Objective-C el que no es mi [...]

➜

5

Comentarios

  1. Impecable como siempre. Gracias por el TIP.

    Urbanchip
    29 / Marzo / 2012

  2. Creo que se pude usar esto con CCS 2

    #fondo {
    position:fixed;
    top:-50%;
    left:-50%;
    width:200%;
    height:200%;
    }
    #fondo img {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
    min-width:50%;
    min-height:50%;
    }

    Albert
    29 / Marzo / 2012

  3. me podrian enviar un ejemplo con el codigo aplicado?

    ricardo gonzalez
    02 / Junio / 2012

  4. el ejemplo en css2 de Albert no funciona en IE

    Roberto
    02 / Octubre / 2012

2

Trackbacks

  1. [...] Ejemplo: CSSLab Fuente: CSSLab [...]
    Fondo al 100% con CSS3 | UrbanBlog
  2. [...] cual pesaría muchos kilos y lo pondría como fondo del <body> (quizás con el fondo al 100%), pero ahora ...
    Fondos múltiples en CSS3 y un truco gradual → CSSLab

Tu aporte

OJO: si vas a agregar código fuente, asegúrate de convertirlas antes a entidades HTML, sino el comentario no se renderizará correctamente.

Cargando