Del autor: Doy la bienvenida a todos. Los colores de fondo y las imágenes en el diseño web juegan un papel muy importante, ya que te permiten diseñar cualquier elemento de forma más atractiva. Cómo hacer un fondo en html, lo veremos hoy.

¿Es posible arreglárselas con html al configurar el fondo?

Te diré ahora mismo que no lo es. En general, html no está diseñado para diseñar páginas web. Es muy inconveniente. Por ejemplo, hay un atributo bgcolor que se puede usar para establecer el color de fondo, pero esto es muy inconveniente.

En consecuencia, utilizaremos hojas de estilo en cascada (css). Hay muchas más opciones para configurar el fondo. Hoy analizaremos las más básicas.

¿Cómo configurar el fondo con css?

Entonces, antes que nada, debe decidir en qué elemento desea configurar el fondo. Es decir, necesitamos encontrar el selector en el que escribiremos la regla. Por ejemplo, si necesita configurar el fondo para toda la página como un todo, puede hacerlo a través del selector de cuerpo, para todos los bloques a través del selector div. Bueno, etc El fondo puede y debe adjuntarse a cualquier otro selector: clases de estilo, identificadores, etc.

Una vez que haya decidido el selector, debe escribir el nombre de la propiedad. Para establecer el color de fondo (es decir, un color sólido, no un degradado ni una imagen), se utiliza la propiedad de color de fondo. Después de eso, debes poner dos puntos y escribir el color en sí. Esto se puede hacer de diferentes maneras. Por ejemplo, usando palabras clave, código hexadecimal, formatos rgb, rgba, hsl. Cualquier método servirá.

El método más utilizado es el código hexadecimal. Para seleccionar colores, puede usar un programa en el que puede ver el código de color. Por ejemplo photoshop, paint o alguna herramienta online. En consecuencia, por ejemplo, prescribiré un fondo común para toda la página web.

cuerpo (color de fondo: #D4E6B3;)

Este código debe insertarse en la sección de cabecera. Es importante que los archivos estén en la misma carpeta.

Imagen como fondo

Para la imagen, usaré un pequeño ícono de lenguaje html:

Vamos a crear un bloque vacío con una ID:

< div id = "bg" > < / div >

Vamos a darle unas dimensiones y un fondo explícitos:

#bg( ancho: 400px; alto: 250px; imagen de fondo: url(html.png); )

#bg( ancho: 400px altura: 250px imagen de fondo: url (html. png);

A partir de este código, puede ver que he usado una nueva propiedad llamada imagen de fondo. Está diseñado solo para insertar una imagen como fondo de un elemento html. Vamos a ver que pasó:

Para especificar una imagen, debe escribir la URL de la palabra clave después de los dos puntos y luego especificar la ruta al archivo entre paréntesis. En este caso, la ruta se especifica en función del hecho de que la imagen se encuentra en la misma carpeta que el documento html. También debe especificar el formato de la imagen.

Si ha hecho esto y el fondo aún no se muestra en el bloque, verifique nuevamente si escribió correctamente el nombre de la imagen, si la ruta y la extensión están configuradas correctamente. Estas son las razones más comunes por las que simplemente no se muestra el fondo, porque el navegador no puede encontrar la imagen.

¿Pero notaste una característica? El navegador tomó y multiplicó la imagen a lo largo del bloque. Entonces, para que lo sepas, este es el comportamiento predeterminado de las imágenes de fondo: se repiten vertical y horizontalmente siempre que puedan caber en el bloque. Por este comportamiento se puede manejar fácilmente. Para hacer esto, use la propiedad background-repeat, que tiene 4 valores principales:

Repetir: el valor predeterminado, la imagen se repite en ambos lados;

Repetir-x: se repite solo en el eje x;

Repetir-y: se repite solo a lo largo del eje y;

Sin repetición: no se repite en absoluto;

Puede escribir cada valor y ver qué sucede. Escribiré así:

fondo-repetir: repetir-x;

fondo-repetir: repetir-x;

Ahora repita solo horizontalmente. Si escribe sin repetición, solo habrá una imagen.

Genial, podemos terminar con esto, ya que estas son las características básicas de trabajar con el fondo, pero te mostraré 2 propiedades más que te permiten obtener más opciones de control.

Con la repetición, los codificadores solían lograr el objetivo de crear texturas de fondo y degradados utilizando una imagen diminuta. Podría ser de 30 por 10 píxeles o incluso más pequeño. O tal vez un poco más. La imagen era tal que cuando se repetía por uno o incluso por los dos lados no se apreciaban transiciones, por lo que al final se obtenía un único fondo sólido. Por cierto, vale la pena usar este enfoque ahora si desea usar una textura perfecta en su sitio como fondo. El gradiente de hoy ya se puede implementar usando métodos css3, definitivamente hablaremos de esto más adelante.

Posición de fondo

De forma predeterminada, la imagen de fondo, si no está configurada para repetirse, estará en la esquina superior izquierda de su bloque. Pero la posición se puede cambiar fácilmente con la propiedad background-position.

Puedes pedirlo de diferentes maneras. Una opción es simplemente especificar los lados en los que debe estar la imagen:

posición de fondo: arriba a la derecha;

posición de fondo: arriba a la derecha;

Es decir, todo quedó igual en vertical: la imagen de fondo se ubica arriba, pero en horizontal cambiamos el lado a la derecha, es decir, la derecha. Otra forma de establecer la posición es como un porcentaje. En este caso, la cuenta regresiva comienza en cualquier caso desde la esquina superior izquierda. 100% - todo el bloque. Así, para colocar la imagen exactamente en el centro, la escribimos así:

posición de fondo: 50% 50%;

posición de fondo: 50% 50%;

Una cosa importante para recordar sobre el posicionamiento es que el primer parámetro es siempre la posición horizontal y el segundo parámetro es la posición vertical. Entonces, si ve un valor de 80% 20%, puede concluir de inmediato que la imagen de fondo se desplazará fuertemente hacia la derecha, pero no bajará mucho.

Y finalmente, puede especificar la posición en píxeles. Todo es igual, solo que en lugar de % habrá px. En algunos casos, tal posicionamiento también puede ser necesario.

notación abreviada

De acuerdo en que el código resulta bastante engorroso si todo está configurado de la forma en que lo hicimos. Resulta que es necesario establecer el camino a la imagen, la repetición y la posición. Por supuesto, la repetición y la posición no siempre son necesarias, pero en cualquier caso, sería más correcto usar la propiedad abreviada. Ella se ve así:

fondo: #333 url(bg.jpg) sin repetición 50% 50%;

fondo : #333 url(bg.jpg) sin repetición 50% 50%;

Es decir, el primer paso es registrar el color de fondo sólido general, si es necesario. Luego el camino a la imagen, repetición y posición. Si algún parámetro no es necesario, simplemente omítalo. De acuerdo, esto es mucho más rápido y conveniente, y también reducimos significativamente nuestro código. En general, le aconsejo que escriba siempre abreviado, incluso si necesita especificar solo un color o una imagen.

Controlar el tamaño de la imagen de fondo

Nuestra imagen actual no se presta muy bien para el próximo truco, así que tomaré una diferente. En tamaño, que sea como un bloque o más grande que él. Entonces, imagina que te enfrentas a la tarea de hacer una imagen de fondo para que no llene por completo su bloque. Y la imagen, por ejemplo, es incluso más grande que el tamaño del bloque.

¿Qué se puede hacer en tal caso? Por supuesto, la opción más sencilla y razonable sería simplemente reducir la imagen, pero no siempre es posible hacerlo. Digamos que se encuentra en el servidor y en este momento no hay tiempo ni oportunidad para reducirlo. El problema se puede resolver con la ayuda de la propiedad background-size, que se puede llamar relativamente nueva y que le permite manipular el tamaño de la imagen de fondo y, de hecho, cualquier fondo.

Entonces, mi imagen ahora ocupa todo el espacio en el bloque, pero le daré un tamaño de fondo:

tamaño de fondo: 80% 50%;

tamaño de fondo: 80% 50%;

Nuevamente, el primer parámetro es el tamaño horizontal, el segundo es el tamaño vertical. Vemos que todo se ha aplicado correctamente: la foto se ha convertido en el 80% del ancho del bloque en ancho y la mitad en alto. Aquí solo necesita hacer una aclaración: al establecer el tamaño como un porcentaje, puede afectar las proporciones de la imagen. Así que ten cuidado si no quieres romper las proporciones.

Como puede suponer, el tamaño del fondo también se puede especificar en píxeles. También hay dos palabras clave de valor que también se pueden usar:

Portada: la imagen se escalará de modo que al menos un lado llene completamente el bloque.

Contener: escala para que la imagen encaje completamente en el bloque en su tamaño máximo.

La ventaja de estos valores es que no cambian las proporciones del cuadro, dejándolas iguales.

Además, debe comprender que estirar la imagen puede provocar un deterioro en su calidad. Puedo dar un ejemplo de la vida y la práctica real de los diseñadores de diseño. Todo el mundo sabe y comprende que al diseñar para escritorios, debe adaptar el sitio a los anchos principales del monitor: 1280, 1366, 1920. Si toma una imagen de fondo de tamaño, digamos, 1280 por 200, y no configura el tamaño de fondo para aparece pantallas con un ancho mayor que un espacio vacío, la imagen no llenará el ancho por completo.

En el 99% de los casos, esto no le conviene al desarrollador web, por lo que establece background-size: cover para que la imagen siempre se estire hasta el ancho máximo de la ventana. Este es un buen truco para usar, pero ahora se encontrará con el problema de que los usuarios con un ancho de pantalla de 1920 píxeles pueden ver una calidad de imagen inferior a la óptima.

Os recuerdo que se estirará al máximo ancho. En consecuencia, la calidad se deteriorará automáticamente. La única solución correcta aquí sería usar inicialmente una imagen más grande: 1920 píxeles de ancho. Luego, en las pantallas más anchas, estará en su tamaño natural, y en otras simplemente se cortará lentamente, pero al mismo tiempo, con una selección competente de la imagen de fondo, esto no afectará la apariencia del sitio.

En general, este es solo 1 ejemplo de cómo aplicar el conocimiento que ha adquirido en este artículo a los diseños de la vida real.

fondo translucido con css

Otra característica que se puede implementar usando css es un fondo translúcido. Es decir, a través de este fondo se podrá ver qué hay detrás.

Como ejemplo, estableceré el fondo de toda la página en la imagen que usamos anteriormente en los ejemplos. Para el bloque con el identificador bg, en el que realizamos todos nuestros experimentos, configuraremos el fondo utilizando el formato de configuración de color rgba.

Como dije antes, hay muchos formatos en css para configurar colores. Uno de ellos es rgb, un formato bastante conocido para quienes trabajan en editores gráficos. Está escrito así: rgb(17, 255, 34);

El primer valor entre paréntesis es la saturación de rojo, luego verde, luego azul. El valor puede ser numérico de 0 a 255. En consecuencia, el formato rgba no es diferente, solo se agrega un parámetro más: el canal alfa. El valor puede ser de 0 a 1, donde 0 es transparencia total.

61.5K

Cualquier habitación se verá mucho mejor con una costosa alfombra persa en el piso. Entonces, ¿qué le pasa a tu sitio? Tal vez sea hora de “cubrir” su piso con una costosa alfombra elegante hecha a mano. Echemos un vistazo más de cerca a cómo hacer un fondo para el sitio:

Fondo para el sitio

Sucede que el diseño del sitio anterior ya es aburrido. Y quiero algo nuevo y sabroso. Y el nuevo diseño será tal si lo cocinas tú mismo.

Pero cambiar todo el diseño del recurso por su cuenta es algo desagradecido. Y no todo el mundo tiene las manos debidamente “afiladas” para este negocio. Por lo tanto, es más fácil actualizar una plantilla antigua cambiando el color de fondo o la imagen de fondo del recurso.

Hay varias formas de cambiar el fondo de un sitio web. Para ello se utilizan las posibilidades de CSS o html. Pero muchas de las propiedades de fondo tienen el mismo nombre y uso en estas tecnologías web.

Conceptos básicos de fondo HTML

Se pueden utilizar varios elementos como fondo:

• Color;
• imagen de fondo;
• imagen de textura.

Veamos el uso de cada uno de ellos con más detalle.

Para establecer el color de fondo de un sitio, utilice la propiedad de color de fondo del atributo de estilo. Es decir, para establecer el color principal de una página web, debe registrarlo dentro de la etiqueta. . Por ejemplo:

Fondo del sitio web #55D52B

Además del código de color hexadecimal, se admite una palabra clave o un valor RGB. Ejemplos:

Fondo del sitio web rgb (23,113,44)

Fondo del sitio web verde

Establecer el color de fondo usando palabras clave tiene una serie de limitaciones en comparación con los otros dos métodos.

En html, solo se admiten palabras clave de 16 colores. Éstos son algunos de ellos: blanco, rojo, azul, negro, amarillo y otros.

Por lo tanto, para configurar el fondo de un sitio html, es mejor usar hexadecimal o RGB.

Además de la selección de colores, hay otras opciones de personalización disponibles. Establecer la propiedad background-color en transparente hace que el fondo de la página sea transparente. Este valor se asigna a esta propiedad de forma predeterminada.

Ahora veamos las posibilidades del lenguaje de hipertexto para configurar la imagen de fondo del sitio. Esto se puede hacer con la propiedad background-image.

Como puede ver en el código, la imagen está enlazada a través de la ruta de URL que figura entre paréntesis. Pero no todas las imágenes resultan ser tan grandes como para llenar toda el área de la pantalla con su tamaño. Veamos cómo se mostrará la imagen más pequeña.

Supongamos que estamos desarrollando un sitio sobre poesía y queremos usar una imagen de Pegaso como fondo. ¡El caballo alado personificará la libertad del pensamiento creativo del poeta!

Queremos que la imagen se muestre en el medio de la pantalla una vez. Pero, desafortunadamente, el navegador no comprende nuestros elevados deseos. Y muestra una imagen más pequeña para el fondo del sitio tantas veces como quepa el área de la pantalla:

Probablemente, cuatro caballos sonrientes con alas serán demasiado para la inspiración de los poetas. Por lo tanto, prohibimos la clonación de nuestro Pegasus. Hacemos esto con la propiedad background-repeat. Valores posibles:

• repetir-x: repite la imagen de fondo horizontalmente;
• repetir-y - verticalmente;
• repetir - en ambos ejes;
• no-repetir - la repetición está prohibida.

Entre estas opciones, nos interesa la última. Antes de cambiar el fondo del sitio, lo usamos en nuestro código:

Pero, por supuesto, es mejor si nuestro volante está ubicado en el medio de la pantalla. La propiedad background-position es solo para colocar la imagen de fondo en la página. Puede establecer las coordenadas de ubicación de varias maneras:

• palabra clave ( arriba, abajo, centro, izquierda, derecha);
• Porcentaje: la cuenta regresiva comienza desde la esquina superior izquierda;
• En unidades de medida (píxeles).

Usemos la opción más simple para centrar:

Sucede que necesita corregir la posición de la imagen al desplazarse. Por lo tanto, antes de convertir una imagen en el fondo del sitio, use la propiedad especial background-attachment . Los valores que acepta son:

• Desplazarse;


• fijado.

Necesitamos el último valor. Ahora nuestro código de ejemplo se verá así:

Fondo de textura del sitio web

En el primer ejemplo, usamos un paisaje desértico grande y hermoso como fondo. Pero por tanta belleza tienes que pagar en su totalidad. El peso de una imagen de alta calidad puede alcanzar varios megas.

Puede personalizar completamente su blog o sitio web muy fácilmente. Este artículo le muestra lo fácil que es cambiar la fuente en el encabezado y la imagen de fondo de una página.

Los blogueros y propietarios de sitios suelen cambiar el fondo para que su sitio sea más atractivo visualmente para los visitantes. Sin embargo, una imagen de fondo que se agrega incorrectamente puede confundir al visitante e incluso generar desconfianza en su sitio o blog y falta de voluntad para visitarlo nuevamente. Para agregar el fondo correctamente, es importante usar los códigos HTML correctos.

Hay solo algunas maneras fáciles de cambiar el aspecto de su sitio existente. Muchos usuarios ni siquiera se dan cuenta de lo fácil que es.

Cómo personalizar la fuente

En primer lugar, deberá agregar cuatro metaetiquetas en cualquier lugar después< head >. Simplemente puede copiar los símbolos a continuación y pegarlos en su recurso, después de eliminar los espacios.

Cómo personalizar el color de fondo

Abre la página en el HTML de tu blog o sitio web. Cuando edita una página en Dreamweaver, puede abrirla para facilitar su trabajo. Si su sitio está construido con un creador de sitios web, algunos servicios le permiten cambiar su configuración de HTML en línea yendo a la página Diseño y seleccionando la pestaña Editar HTML. De cualquier manera, debería poder acceder a los códigos HTML de su blog o sitio web. El proceso de configuración puede variar mucho según los servicios que tenga disponibles y el motor que esté utilizando.

No vale la pena intentar buscar una imagen separada con un color diferente si lo único que tienes que hacer es cambiar el color de fondo. En su lugar, simplemente puede editar el HTML y cambiar el color existente por el que desee conservar.

Puede encontrar fácilmente una tabla de colores HTML en publicaciones especializadas. Cada color se muestra en el marcado como un código de seis dígitos. Por ejemplo, un fondo blanco se designa como #FFFFFF.

Por lo tanto, busque el código de color que desea ver en su sitio como color de fondo. En el marcado se vería así:

color de fondo:#XXXXXX; (

Después de guardar el color de fondo en HTML, verá que la apariencia de su página ha cambiado.

Agregar una imagen de fondo

Seleccione la imagen que desea agregar como fondo. Hay muchos sitios que te permiten descargar dichos fondos. Además, puede usar una imagen que ya está guardada en su computadora.

Sube la imagen a Internet. Muchos le permiten descargar imágenes de forma gratuita. Obtenga una URL para su imagen de fondo. Para hacer esto, debe abrir la imagen en su navegador y copiar la URL.

Pegue el código para agregar una imagen como fondo. En HTML se ve así:

imagen de fondo: url (URL de la imagen);

Debe agregar el código donde comienza el cuerpo de la página en el HTML. Guarde los cambios después de editar y cargue su sitio. Podrá ver que la imagen ha reemplazado completamente el color de fondo.

Sin embargo, recuerda que las imágenes que son demasiado grandes pueden tardar mucho en cargarse, lo que será desagradable para muchos visitantes. Por esta razón, trate de elegir imágenes pequeñas para este propósito.

En los capítulos anteriores, compilamos la plantilla principal de documentos HTML, decidimos qué son las etiquetas HTML, aprendimos cómo guardar y editar archivos html, y en este capítulo Familiaricémonos con los atributos de las etiquetas y cambie el color del texto y el fondo de la página.

Abramos nuestro índice.html, para editar: lo logré!!!

Y cambiémoslo un poco, agreguemos atributos: texto="#000000" bgcolor="#ffffff"> ¡¡¡Lo hice!!!

Atributo es un parámetro de etiqueta que se inserta en la etiqueta como un "par" (nombre de parámetro + valor de parámetro).
Se insertan valores de atributo de etiqueta:
1) texto=#000000 sin comillas;
2) text="#000000" entre comillas simples;
3) text="#000000" entre comillas dobles.
Cualquiera de estas opciones es correcta, pero si le importa la ética del código, es mejor usar comillas dobles, como en mi ejemplo anterior.

Atributo "texto" controla el color del texto en toda la página, y "bgcolor" controla el color de fondo de la página.

Ahora propongo hablar de colores para documentos HTML. El color se establece:
1) texto = "oro"- palabras en inglés, por ejemplo: oro (oro), rojo (rojo), verde (verde), etc.
Pero el color solo puede consistir en una palabra, por ejemplo, "rojo", pero si escribe "verde-rojo", el navegador no lo entenderá y simplemente lo ignorará.
2) texto="#000000"- Combinación de colores RBG (rojo verde azul). "#" este carácter dice que es un número de color, los dos primeros caracteres (cero en mi ejemplo) dicen cuanto le quitamos el color "rojo", el segundo verde y los dos últimos azul.
Cada color se establece de 00 a FF (0-1-2-3-4-5-6-7-8-9-A-B-C-D-E-F), por ejemplo #000000-negro, #ffffff-blanco, #ff0000-rojo, # 00ff00- verde #0000ff-azul

Como beneficio adicional del sitio, le sugiero que descargue la paleta de colores (2kB), que se muestra en la imagen de arriba. Necesita descomprimir el archivo para ejecutar el archivo color.html, luego, en un campo grande, coloque el puntero del mouse sobre el color que necesita, que se mostrará en una pequeña ventana, y si hace clic con el mouse en este momento, el código de color aparecerá en una pequeña ventana a la derecha.

Ahora volvamos a nuestro archivo. índice.html y guardarlo como tsvet.html, ahora vamos a ver qué pasó. ¿Cómo era y cómo es? Y tienes toda la razón, ya que el blanco es para el fondo y el negro para el texto es el color predeterminado. Para notar la diferencia, cambiemos los valores de los atributos:

texto=oro" bgcolor="#0900b8"> ¡¡¡Lo hice!!!

Guardar y ver (se abre en una nueva pestaña)

Hay otras formas de establecer texto en archivos html, pero estas dos se consideran las principales.

En el próximo capítulo, aprenderemos cómo administrar texto con etiquetas BR, cómo ajustar texto en otra línea.

Lección 7. Texto y color de fondo en HTML.

Fecha: 2008-12-05

¿Cómo configurar el fondo y el color del texto en una página web?

Por defecto, el color del texto y, en general, cualquier fuente en las páginas web es siempre negro (#000000 ). Pero siempre podemos establecer absolutamente cualquier color que nos guste y se vea decente o más adecuado para el diseño de un sitio en particular.

Establecer el color del texto

En HTML, el color del texto, la fuente, el fondo y otros elementos se pueden configurar de dos formas:

1. Método 1. En etiquetas de par se escribe el atributo con el nombre del color deseado. El nombre del color se indica en inglés. Por ejemplo, el color del título en nuestra página web se puede configurar de esta manera:

Comentarios sobre este artículo (lección):

Andrey! ¡Qué maravilloso sitio tienes! Lo he estado usando regularmente durante la segunda semana: he estado estudiando sus lecciones y tutoriales en video; Leo su literatura y descargo programas; ¡Estoy dando mis primeros pasos en la programación web! Y, lo más importante, ¡puedo hacerlo! ¡Y no soy físico en absoluto, sino un letrista! Y todo el que visite mi sitio literario se puede convencer de esto: "POEMAS DE OLEG GUZ" Mis datos: e-mail: STIH [correo electrónico protegido] sitio web: http://sites.google.com/site/stihiolegguz/

revisa el código cuidadosamente

¡He intentado cambiar el color de fondo y no funciona! ¿Cómo cambiar el color de fondo?