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 .
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;)
(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 .
Microdatos .
Manifiesto
Herramientas para un sitio web mas rápido.
Canvas.
Nota adhesiva ,audio vídeo.
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.
ResponderEliminarsi 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