Fondo Web con Truco CSS

Fondo Web Llamativo

Cuantas veces hemos pensado en ponerle a nuestra web un fondo impactante, limpio y exactamente acoplado? Os revelaré un sencillo truco, que os permitirá hacer que vuestro background quede totalmente implementado al navegador del visitante, dando de esta manera, una excelente primera vista.

Para este truco utilizaremos una instrucción CSS muy poco vista en la red:

background-size: cover;

Esto simplemente acoplará la imagen de fondo a la pantalla, sin redimensionarla, dejando ver de esta manera, un fondo web realmente nítido.

Además de incorporar esta sencilla instrucción CSS también tendremos que tener en cuenta otras configuraciones en CSS, para que nuestra web pueda fardar de este truco CSS.

  • No repetir la imagen en el fondo
  • Imagen del fondo centrada tanto horizontal como verticalmente.
  • Anchura mínima de 100% para navegadores móviles

Quedando como resultado algo semejante a:

html{

background:url('background.jpg') no-repeat center center;

min-height:100%;

background-size:cover;

}

body{

min-height:100%;

}

Más información – Fondos Web

Packs de recursos a precios increíbles
Aprovecha la ocasión y hazte con alguno de estos packs con recursos de calidad para profesionales, ahora a precios muy rebajados:
Pack rebajado un 99%1000 fotos rebajadas un 64%

Categorías

CSS

Sergio Ródenas

Con 16 años, autodidacta y con cierta experiencia a la espalda, Sergio Ródenas, conocido en la web como Rodenastyle, es un joven español cuya... Ver perfil ›

Un comentario

  1.   Antonio Torres dijo

    Gracias por los aportes ya que nos ayuda a mejorar nuestros diseños web

Escribe un comentario