Fondos
Este pos lo estoy catalogando en HTML por que esta diseñado para paginas HTML.
A muchas personas se les complica el echo de poner un fondo a una pagina web, ¿Por qué? la cuestion es sencilla puesto que no le dan los parametros necesarios al fondo que quieren, no es simplemente poner la propiedad background y ya con eso tienes el fondo, ¡No! ese no es el chiste.
Para que un fondo te quede tal como tu lo quieres es necesario saber como lo quieres o como lo necesitas, quieres que ocupe todo el fondo de la pagina?, quieres que ocupe la mitad de la pagina?, quieres que que solo se vea un unico fondo sin que se repita o quieres tu fondo como mosaico?, todo depende de como quieras o necesites tu fondo.
Deben tener en mente que tipo de fondo es el que quieren para su pagina
En primera estancia abriremos un nnuevo documento HTML con todas las etiquetas basicas, una ves creado el documento y cerrado bien las etiquetas procederemos a incertar el codigodentro de la etiqueta style (Si no saben cuales son las etiquetas basicas pasen por
Empezaremos creando la base de nuestro Documento.
<html lang= "es" >
<head>
<meta charset= "UTF-8" >
<meta name= "apple-mobile-web-app-capable" name= "yes" >
<meta name= "viewport" content= "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" >
<title> Fondos y Transparencias </title>
<style type= "text/css" >
/* Estilos CSS */
</style>
</head>
<body>
Aqui el contenido de la pagina
</body>
</html>
Lo primer que tenemos que hacer es ponerle el estilo CSS a la pagina es decir entre la etiqueta style poner el nombre de la propiedad a la que se le pondra el estilo lo mas conbeninete en este caso es que se lo pongan a la etiqueta "body" seguido de la propiedad background y poner todos los datos necesarios que serian la url de la imagen la posicion el ancho que ocupara y si la imagen se va a repetir.
body {
background : url('url de la imagen') center no-repeat;
background-size :100%;
}
/* imagen en mosaico*/
body {
background : url('url de la imagen') center;
background-size :100%;
}
/* imagen completa al 100% de la pagina */
body {
background : url('url de la imagen') center no-repeat;
background-size :180%;
}
Deben tener en cuenta que si la imagen no es lo suficiente grande no ocupara el espacio necesario que es toda la pagina, en el ejemplo anterior se le esta diciendo que sea al 100% de la imagen sin escalar o acortar que sea centrada y que no se repita para que no aparesaca en mosaico, les rocomiendo que utilicen imagenes de 2k o 4k son hd y full hd son muy grandes por si la pagina la ven en pantallas de alta resolucion no cause conflictos o se vean espacios en blanco tambien deben pensar que la imagen se puede deformar si la pagina o es muy ancha o muy angosta.
Ejemplo 2:
Ejemplo 3: