CSS3 con imágenes en y,x y al fondo al 100%.

Imagen al fondo al 100% 



body{

   background-image: url("../imagenes/fondo2.png");
   background-size: 100% 100%;


y listo imagen al 100% de nuestra pantalla .





Muchas imágenes pequeñas 

background-size:150px 40px;



De esta manera multiplicare la imagen al tamaño deseado ,quedando un fondo con muchas imágenes pequeñas.



<html>
<head>
<style text="text/css">
body{

background:url(publicu.jpg);
background-size:150px 40px;
}

</head>

<body>


</body>

</html>

Quedando de esta manera .










Que  no se Repita.



background-repeat:no-repeat;

De esta manera quedara la imagen de lado izquierdo en su tamaño original .





<html>
<head>
<style text="text/css">
body{

background:url(publicu.jpg);
background-repeat:no-repeat;
}

</head>

<body>


</body>

</html>

quedando así.




Que se repita en x  

background-repeat:repeat-x;
De esta manera la imagen se repetirá en una sola linea superior  horizontal  .




<html>
<head>
<style text="text/css">
body{

background:url(publicu.jpg);
background-size:150px 40px;

background-repeat:repeat-x;
}

</head>

<body>


</body>

</html>

En x quedaría así.





Que se repita en y.

background-repeat:repeat-y;



<html>
<head>
<style text="text/css">
body{

background:url(publicu.jpg);
background-size:150px 40px;

background-repeat:repeat-y;
}

</head>

<body>


</body>

</html>


asi.









Imagen en el centro superior .

Se colocara en la parte central  superior del fondo de la pagina 

<html>
<head>
<style type="text/css">
div{
padding:30px;
border:2px solid black;
background:url(publicu.jpg);
background-repeat:no-repeat;
background-size:100% 100%;

}



</style>

</head>


<body>


<div></div>
</body>
</html>

quedando así .







Aplicando medidas 
width:300px;
height:300px;

ejercicio completo.

<html>
<head>
<style type="text/css">
div{
padding:30px;
border:2px solid black;
background:url(publicu.jpg);
background-repeat:no-repeat;
background-size:100% 100%;
width:300px;
height:300px;
}



</style>

</head>


<body>


<div></div>
</body>
</html>

quedando perfectamente encajada .



Texto sobre la imagen 

Simplemente editar en la etiqueta div y apare-sera dentro de la imagen .


Ajustando la imagen .



<html>
<head>
<style type="text/css">
div{
padding:20px;
border:1px solid black;
background:url(publicu.jpg);
background-repeat:no-repeat;
background-size:100% 100%;
width:300px;
height:300px;
background-origin:border-box;
}



</style>

</head>


<body>


<div></div>
</body>
</html>




Quedando con el ajuste (background-origin:border-box;)

así.


en este  se aplica una especie de padding  con
 (background-origin:content-box;)






<html>
<head>
<style type="text/css">
div{
padding:20px;
border:1px solid black;
background:url(publicu.jpg);
background-repeat:no-repeat;
background-size:100% 100%;
width:300px;
height:300px;
background-origin:content-box;
}



</style>

</head>


<body>


<div></div>
</body>
</html>



quedando.









es todo .


Tal ves te interese .




Comentarios

  1. Parece interesante, está muy bien explicado pero calaria más si pusieras un ejemplo, ya se que se puede probar en unos minutos pero somos tan flojos que nos gusta ver como queda para luego probarlo, gracias por el aporte un saludo.

    ResponderEliminar
  2. si tiene razón gatonegro , estoy adaptando una web externa para mostrar los ejercicios en tiempo real ya que de hacerlo directamente en el blog me da unos baches espantosos , gracias por el mensaje realmente hace falta las imágenes. Cuídate.

    ResponderEliminar

Publicar un comentario