sábado, 20 de marzo de 2021
👨💻 Un Aliado Potente: Los Fondos HTML
A veces, los fondos html, suelen quedar en segundo plano de importancia. Pero si le damos un poco de protagonismo, descubriremos que nuestro sitio será doblemente llamativo e interesante. Y si te vas a dedicar a creación de templates, o al desarrollo profesional del sitios, deberías poner en práctica lo que voy a mostrarte.
En este artículo descubrirás como aplicar correctamente los fondos html para resaltar tu sitio.
Si navegas los sitios de templates, observarás la gran calidad de trabajos que existen hoy en día.
Sitios muy llamativos y atractivos, y por lo general tienen muy bien trabajado el fondo de las paginas. No solo desde el diseño, sino desde la correcta implementación.
Imagínate si creas un diseño de página atractivo, con un fondos html llamativos que realcen el nivel del tu diseño, pero cuando intentas aplicar los fondos html, los mismos se distorsionan al verlos en diferentes navegadores. O peor, por no conocer la diversas formas de ármalo, terminas implementando un fondo único y plano.
Déjame explicarte las diferencias entre los tipo de fondos html, y su correcto modo de aplicación.
Existen 3 tipos de fondos html:
– Fondos lisos
– Fondos únicos
– Fondos de mosaico o patterns
Fondos Lisos:
Son los fondos en donde existe un solo color, sin ningún tipo de textura ni grafico.
Fondos Únicos:
Son fondos con algún tipo de textura o grafico, que encajan fijos en la pagina en un solo lugar y no se repiten por más que la medida del monitor donde se esté viendo, exceda su tamaño.
Fondos de Mosaico o Patterns:
Son los fondos que una vez aplicados, se repiten llenando el espacio visible de la pagina, sin importar la medida del monitor donde se esté visualizando.
Veremos ahora como se aplica cada tipo de fondo con Html y CSS.
Para definir un fondo de página, solo debemos aplicar algunas propiedades a la etiqueta nativa de HTML, llamada <body>. El <body>, como ya comenté en otros artículos, es una etiqueta que NO definimos nosotros, sino que ya viene definida por defecto. Solo cambiamos los valores de sus propiedades.
Lo que tenemos que hacer para aplicar los fondos html es ingresar en nuestro código del archivo CSS, lo siguiente:
body {
propiedad: valor;
}
Las propiedades que usaremos para los fondos, serán :
background-color:
Define el color del fondo. Se le asigna el código hexadecimal del color elegido, por ej: #ff0000 (rojo)
background-image url(nombre_de_imagen.jpg):
Define la imagen de fondo. Se le asigna el camino y nombre del archivo de imagen para el fondo.
background-repeat:
Define como se repetirá o no, la imagen en nuestro fondo.
Se le puede asignar:
repeat (para repetir la imagen horizontal y verticalmente)
repeat-x (para repetir la imagen horizontalmente)
repeat-y (para repetir la imagen verticalmente)
no-repeat (para no repetir la imagen, solo se aplica una sola vez ubicándola arriba a la izquierda)
background-attachment:
Determina si el fondo quedará fijo o no, cuando hagamos scroll en nuestro navegador.
Se le puede asignar:
fixed (fijo, sin scroll)
scroll (con scroll)
background-position:
Determina donde se colocará la imagen de fondo. Si no hay valores, por defecto se coloca arriba a la izquierda. Si le asignamos valores en pixeles, su origen se desplazará a los pixeles que le asignemos, primero en el eje horizontal y luego el vertical.
Ej:
background-position: 10px 10px;
(10 px a la derecha, y 10 px hacia abajo)
EJEMPLOS
Entonces, vamos a ver los diferentes códigos CSS que usaríamos para cada uno de los 3 tipos de fondos que nombré arriba:
Fondo Liso (definimos solo un color de fondo):
body {
background-color: #ff0000;
}
Fondo Unico (se define la imagen de fondo, y se le asigna no repetirla):
body {
background-image: url(fondo_pantalla.jpg);
background-repeat: no-repeat;
}
Fondo de Mosaico o Patterns (se define una imagen y se asigna repetirla horizontal y verticalmente:
body {
background-image: url(fondo_pantalla.jpg);
background-repeat: repeat;
}
Te aconsejo que aunque tengas un fondo fijo o de mosaico, siempre definas un color de fondo para tu pagina que sea similar al predominante de la imagen. Asi, si el fondo tarda en cargar, el usuario puede ver un color parecido al de la imagen.
Te propongo que practiques definiendo diferentes tipos de fondos html para tus paginas, y combinando las diferentes propiedades y valores.
Fuente: https://www.psdahtmlpasoapaso.com/blog/un-aliado-potente-los-fondos-del-html/