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   Crear el efecto light painting con Photoshop

4 COMENTARIOS

Dejar una respuesta

Please enter your comment!
Please enter your name here