Primer texto

Segundo texto

Si necesita diseñar un documento en el editor de texto de Microsoft Word no solo correctamente, sino también de manera hermosa, entonces es mejor usar algún tipo de dibujo de fondo. Puedes elegir cualquiera, pero es mejor que coincida con el texto impreso. También puede ser un logotipo o el nombre de una empresa. Si los colocas detrás del texto, se ve más bonito que una marca de agua o un fondo y llama más la atención.

En este artículo veremos este tema y aprenderemos cómo hacer una imagen como fondo en MS Word.

Agregue una imagen a través del elemento de menú correspondiente.

A continuación se explica cómo seleccionar una imagen para una página en Word 2007, 2010 y 2013. Abra el documento deseado y vaya a la pestaña "Diseño de página". Luego haga clic en el botón "Color de página" y seleccione del menú.

Si tiene instalado Word 2016, en el documento abierto vaya a la pestaña "Diseño" y luego haga todo como se describe arriba: “Color de página” – “Métodos de relleno”.

Se abrirá un pequeño cuadro de diálogo. En él, vaya a la pestaña "Dibujo" y haga clic en el botón con el mismo nombre, que se encuentra debajo del área vacía en el medio.

En Word 2016, esto aparecerá frente a la ventana que se muestra en la captura de pantalla anterior. En él podrás seleccionar desde dónde quieres insertar la imagen, puede ser una imagen de tu computadora o encontrar lo que necesitas a través de la búsqueda.

Después de seleccionar una imagen, haga clic en "Aceptar" en la ventana correspondiente.

La ventaja de este método es que el fondo que seleccione se aplica a todas las páginas del documento.

La desventaja es que la imagen debe tener el tamaño correcto. Como puede ver, en el ejemplo, solo se ve un pingüino. En consecuencia, necesito guardar esta imagen con un tamaño diferente a través de algún editor, por ejemplo Paint.

Hacer una imagen como fondo de la página.

Veamos otra forma de convertir la imagen deseada en el fondo.

Abra el documento y vaya a la pestaña. Luego haga clic en el botón "Imagen" para agregarla a la página.

En la siguiente ventana, busque lo que más le convenga en su computadora, selecciónelo y haga clic en "Insertar".

Después de agregar la imagen, haga clic derecho sobre ella y seleccione en el menú contextual “Ajuste de texto” – “Detrás del texto”.

Ahora todo el texto que hay en el documento se mostrará delante de la imagen. Para que la imagen seleccionada sea el fondo de toda la hoja y eliminar los márgenes blancos, debe estirarla. Para hacer esto, haga clic en la imagen. Inmediatamente aparecerán marcadores a lo largo de los bordes: puntos en las esquinas y un punto en cada lado. Usando estos marcadores, estire el marco a lo ancho y alto para cubrir toda la hoja.

Así me pasó a mí. La ventaja de este método es que puede elegir de forma independiente qué parte de la imagen se mostrará en la hoja: todo, o puede estirarla y hacer que solo se muestre un área determinada.

Pero si necesita utilizar una imagen y hay muchas páginas en el documento, entonces es mejor elegir el tamaño adecuado y convertirla en fondo, como se describe en el primer párrafo.

Sus documentos se verán más interesantes después de colocar una imagen adecuada como fondo de las páginas. Sólo recuerde que no debe perderse ningún texto en el fondo seleccionado y debe coincidir con el texto.

Califica este artículo:

Del autor: Hola a todos. Los colores de fondo y las imágenes juegan un papel muy importante en el diseño web, ya que permiten diseñar cualquier elemento de forma más atractiva. Hoy veremos cómo crear un fondo en HTML.

¿Es posible utilizar HTML para establecer el fondo?

Diré de inmediato que no. En general, HTML no fue creado para diseñar páginas web. Es simplemente muy inconveniente. Por ejemplo, existe un atributo bgcolor con el que puedes establecer el color de fondo, pero esto es muy inconveniente.

En consecuencia, utilizaremos hojas de estilo en cascada (CSS). Hay muchas más oportunidades para establecer un fondo. Hoy veremos los más básicos.

¿Cómo configurar el fondo usando CSS?

Entonces, antes que nada, debes decidir en qué elemento deseas establecer el fondo. Es decir, necesitamos encontrar un selector en el que escribiremos una regla. Por ejemplo, si necesita configurar el fondo para toda la página, puede hacerlo a través del selector de cuerpo y para todos los bloques a través del selector div. Bueno, etc El fondo puede y debe estar vinculado 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 o una imagen), utilice la propiedad 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, utilizando 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 utilizar un programa que muestre el código de color. Por ejemplo, photoshop, paint o alguna herramienta online. En consecuencia, como ejemplo, escribiré un trasfondo general para toda la página web.

cuerpo (color de fondo: #D4E6B3;)

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

Imagen como fondo

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

Creemos un bloque vacío con un identificador:

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

Démosle dimensiones y antecedentes explícitos:

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

#bg( ancho: 400px; altura: 250 píxeles; imagen de fondo: URL (html.png);

En este código puedes ver que utilicé una nueva propiedad: imagen de fondo. Está diseñado específicamente para insertar una imagen como fondo de un elemento html. Veamos qué pasó:

Para especificar una imagen, debe escribir la URL de la palabra clave después de los dos puntos y luego indicar la ruta al archivo entre paréntesis. En este caso, la ruta se especifica en función del hecho de que la imagen está 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 y si la ruta y la extensión están configuradas correctamente. Estas son las razones más comunes por las que el fondo simplemente no aparece porque el navegador no puede encontrar la imagen.

¿Pero notaste una cosa? 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 quepan en el bloque. Mediante este comportamiento puedes controlarlo fácilmente. Para hacer esto, use la propiedad de repetición de fondo, que tiene 4 valores principales:

Repetir – 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;

No repetir – no se repite en absoluto;

Puedes escribir cada valor y ver qué sucede. Lo escribiré así:

repetición de fondo: repetir-x;

fondo-repetir: repetir-x;

Ahora repita solo horizontalmente. Si establece que no se repita, solo habrá una imagen.

Genial, podemos terminar aquí, ya que estas son las capacidades básicas para trabajar en segundo plano, pero te mostraré 2 propiedades más que te permiten tener más control.

A través de la repetición, los diseñadores de diseño solían poder crear texturas de fondo y degradados usando una imagen pequeña. Podría tener 30 por 10 píxeles o incluso menos. O tal vez un poco más. La imagen era tal que cuando se repetía en uno o incluso en ambos lados, no se veían transiciones, por lo que el resultado era un fondo único y sin costuras. Por cierto, vale la pena utilizar este enfoque ahora si desea utilizar una textura perfecta en su sitio web como fondo. Hoy en día, el gradiente ya se puede implementar utilizando métodos css3, definitivamente hablaremos de esto más adelante.

Posición de fondo

De forma predeterminada, la imagen de fondo, a menos que esté configurada para repetirse, estará en la esquina superior izquierda de su bloque. Pero la posición se puede cambiar fácilmente usando la propiedad de posición de fondo.

Puedes configurarlo de diferentes maneras. Una opción es simplemente indicar los lados en los que debe ubicarse la imagen:

posición de fondo: arriba derecha;

posición de fondo: arriba derecha;

Es decir, verticalmente todo sigue igual: la imagen de fondo se ubica arriba, pero horizontalmente cambiamos el lado a derecha, es decir, derecha. Otra forma de establecer una posición es como porcentaje. En este caso, la cuenta atrás comienza en cualquier caso desde la esquina superior izquierda. 100% - todo el bloque. Así, para situar la imagen exactamente en el centro, la escribimos así:

posición de fondo: 50% 50%;

posición de fondo: 50% 50%;

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

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

Notación taquigráfica

De acuerdo en que el código resulta bastante engorroso si todo está configurado como lo hicimos nosotros. Resulta que es necesario especificar la ruta 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 utilizar una notación abreviada para la propiedad. Se parece a esto:

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 grabar el color de fondo sólido general, si es necesario. Luego el camino hacia la imagen, la repetición y la 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, te aconsejo que escribas siempre de forma abreviada, aunque sólo necesites indicar un color o una imagen.

Controlar el tamaño de la imagen de fondo

Nuestra imagen actual no es muy buena para demostrar el siguiente truco, así que tomaré otra. Sea del tamaño de un bloque o más. Entonces, imagina que te enfrentas a la tarea de hacer una imagen de fondo para que no ocupe completamente su bloque. Y la imagen, por ejemplo, es incluso más grande que el tamaño del bloque.

¿Qué puedes hacer en este 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 está en el servidor y de momento no hay tiempo ni oportunidad de reducirlo. El problema se puede resolver utilizando la propiedad background-size, que puede considerarse relativamente nueva y que permite manipular el tamaño de la imagen de fondo y, de hecho, de 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 establece el tamaño horizontal, el segundo, el tamaño vertical. Vemos que todo se aplicó correctamente: la foto se convirtió en el 80% del ancho del bloque en ancho y la mitad en alto. Aquí solo necesita hacer una aclaración: al configurar el tamaño como porcentaje, puede influir en las proporciones de la imagen. Así que tenga cuidado si no quiere alterar las proporciones.

Como puedes adivinar, el tamaño del fondo también se puede especificar en píxeles. Hay dos palabras clave más que también se pueden utilizar:

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

Contener: lo 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 de la imagen, dejándolas iguales.

También debe comprender que estirar la imagen puede provocar un deterioro de su calidad. Puedo dar un ejemplo de la vida y la práctica real de los maquetadores. Todo el mundo sabe y comprende que al diseñar para escritorios, es necesario adaptar el sitio a los anchos del monitor principal: 1280, 1366, 1920. Si toma una imagen de fondo de, digamos, 1280 por 200 y no le da un fondo. tamaño, luego pantallas con un ancho mayor Aparecerá un espacio vacío, la imagen no llenará el ancho por completo.

En el 99% de los casos, esto no conviene al desarrollador web, por lo que establece el tamaño de fondo: cubierta para que la imagen siempre se extienda hasta el ancho máximo de la ventana. Esta es una buena técnica, pero ahora se enfrentará al problema de que los usuarios con un ancho de pantalla de 1920 píxeles pueden ver una calidad de imagen subóptima.

Déjame recordarte que se estirará hasta su ancho máximo. En consecuencia, la calidad se deteriorará automáticamente. La única solución correcta aquí sería utilizar 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 irá cortando gradualmente, pero al mismo tiempo, si seleccionas correctamente la imagen de fondo, esto no afectará la apariencia del sitio.

En general, este es sólo un ejemplo de cómo utilizar el conocimiento adquirido en este artículo al diseñar diseños reales.

Fondo translúcido usando 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é la página completa como fondo de la imagen que usamos anteriormente en los ejemplos. Para el bloque con identificador bg, en el que realizamos todos nuestros experimentos, configuraremos el fondo usando el formato de configuración de color rgba.

Como dije antes, existen muchos formatos para configurar colores en CSS. Uno de ellos es rgb, un formato bastante conocido por 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 y 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.

A la hora de configurar cualquier sitio web, además de la funcionalidad, el diseño es muy importante. Esto es lo que marca el estilo y diseño propio de una determinada empresa o persona para quien se está creando el sitio web. Personalizar el color de fondo y la imagen es fácil siguiendo las instrucciones de este artículo.

Abra su archivo HTML usando el Bloc de notas o cualquier otro editor de texto al que esté acostumbrado.

Por ejemplo, tomemos una página web primitiva con un mínimo de texto. Puede abrir su archivo usando cualquier navegador.
Primero, cambie el color de su fondo, ya que las personas con una conexión a Internet lenta no podrán ver inmediatamente la imagen de fondo del sitio. Por un tiempo, mientras se carga la imagen, solo podrán ver el color de su sitio. Ingrese en la etiqueta

parámetro bgcolor=”*****”, donde ***** es el código de color. Puede encontrar los colores para HTML en cualquier editor gráfico seleccionando la opción "para web" o en el sitio web https://colorscheme.ru/color-names

Sólo necesitas seleccionar un color en la paleta del círculo y asignar su intensidad dentro del cuadrado. A la derecha verás dos códigos para html. Cópialos y pégalos en el bloc de notas.

Después de seleccionar un color e insertarlo en el código, vea si hizo todo correctamente viendo la página web resultante desde un navegador.

Ahora puedes comenzar a insertar tu imagen de fondo. Coloque la imagen deseada en la carpeta de códigos para mayor comodidad. Ponle un nombre en letras latinas.

Ahora descubra la ubicación del archivo haciendo clic derecho sobre él, seleccionando "Abrir con" y haciendo clic en cualquier navegador instalado en su computadora.

Copie la dirección de la barra de búsqueda de su navegador. Ahora en la etiqueta

• ingrese la línea:

estilo = "imagen de fondo: url ('archivo:///C:/Users/FILE_PATH.jpg')"

Guarde su archivo.

Consulta tu página web. Verás que el fondo ha sido sustituido por tu texto.

• repetición de fondo: "Valor". Las opciones para su valor podrían ser: “repeat-x” – repite su imagen de fondo tanto horizontal como verticalmente. “repeat-y” – repetición sólo verticalmente. “sin repetición”: la imagen se congela en su lugar y no se repite. “espacio”: toda la página se llenará con el número máximo de copias de la imagen, las más externas se recortarán. “redondo” – la misma opción, pero los bordes de la imagen se escalarán cuidadosamente;
• adjunto de fondo: "Valor". Si sustituye la etiqueta "desplazamiento" en lugar de la palabra Valor, la imagen se desplazará junto con el sitio. “fijo”: el fondo permanece sin cambios al desplazarse;
• tamaño de fondo: Valor Valor2. Aquí los valores deben tomar un valor en píxeles. Por ejemplo: 100 px 200 px. Además de los píxeles, se aceptan valores porcentuales. Esta es una opción para llenar la página con una imagen. Además de los números, puede ingresar dos parámetros: “contener” – llena la página con una imagen a lo largo del lado largo y “portada” – llena la página con una imagen a lo ancho.

Una vez que conozca los conceptos básicos para llenar una página con fondo en HTML, estará listo para crear su primer sitio web.

Para crear un sitio web, una pregunta importante es cómo crear un fondo en HTML. Este procedimiento implica el uso de determinadas etiquetas: palabras y letras de código. Gracias a ellos, puedes poner un fondo diferente, hacerlo monocromático, rellenarlo o poner cualquier imagen en lugar del fondo. Estas acciones serán muy útiles para todos los maquetadores y para aquellos que decidan "vestir" su sitio web por su cuenta.

haciendo el fondo

Antes de crear el fondo del sitio web en HTML, debe abrir el código HTML de la página en un editor de texto. Debe recordar que las etiquetas de la página se colocan verticalmente. Luego, entre las etiquetas … , necesitas poner una etiqueta- estas etiquetas son necesarias para aclarar el estilo de los elementos de una página web determinada. En lugar de los tres puntos debes escribir - cuerpo (fondo:) . Esta es una opción que le permite configurar diferentes estilos para el fondo de la página. Puede realizar la operación de configuración de color de dos maneras. Primero:

Cuerpo (fondo:#000000): el fondo de la página ahora debería ser negro.

Este método también es adecuado para configurar tanto un color como una imagen como fondo. Es después de los dos puntos donde puede colocar un código de color o un enlace a la imagen. O puede utilizar un método que solo signifique establecer un color: un relleno específico para la página. Después de los dos puntos es necesario escribir el llamado parámetro – color. Y después, ponemos el código del color en sí. Este método es bueno si lo usas como plantilla. Anótalo y guárdalo, y cuando sea necesario, establece un color y ponlo en la página.

Puedes poner una imagen en lugar de un fondo liso. Si necesita saber: en HTML, cómo hacer una imagen como fondo, entonces debe realizar operaciones similares. Escribe etiquetas, pon cuerpo (fondo: enlace a la imagen). Debemos recordar que la imagen en sí puede estar en cualquier lugar. Y en un sitio web de Internet, pero es mejor crear una carpeta en la raíz del documento. En la carpeta en la que se guardará toda la información sobre la página del sitio, debe crear otra, para imágenes. La operación se verá así:

Ahora la imagen que ha elegido será el fondo de toda la página del sitio. Esperamos que entiendas cómo hacer un fondo en html. ¡Inténtalo y definitivamente todo saldrá bien!