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 .