Como redimensionar el background usando CSS 3

4

La semana pasada publicamos una nota con 38 Texturas y Fondos web gratis con estilo abstracto en donde mencionábamos que los fondos webs están tomando más importancia en los diseños ya que algunos background forman parte de la composición general.

Hoy te traemos un tutorial para que puedas hacer un buen uso de este recurso. En caso de que uses una imagen de fondo, por ej un paisaje, te enseñamos como redimensionar el background usando Css3 para que este se adapte a todas las resoluciones de pantalla.

redimensionar background css3

El HTML

Esto es solamente un ejemplo del html que tendremos que armar para poder crear el efecto de redimencionar el background con CSS3

 
<div id="container">
<h1>Redimencionar el Background con CSS</h1>
<p>Aca va el texto</p>
</div>

El CSS3

 
body {
margin: ;
padding: ;
background: #000 url(images/fondoweb.jpg) center center fixed no-repeat;
-moz-background-size: cover;
background-size: cover;
color: #fff;
}
 
#container {
margin: 20px auto;
width: 600px;
padding: 25px;
background: transparent url(images/black50.png);
background: rgba(, , , 0.5) none;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
}
 
h1 {
margin: ;
}
 
p {
margin: 10px  ;
}
 
a {
color: #aaa;
}

Ver demo

Via alistapart.com

Quizas te interese   Mostrar miniatura de videos Youtube con Shortcode

4 COMENTARIOS

Dejar una respuesta

Please enter your comment!
Please enter your name here