Sitio de anidación: cómo html para que la imagen de fondo

Muchos nuevo diseño, acaba de obtener al corazón de la creación de sitios, a menudo se preguntan cómo html para que la imagen de fondo.Y si algunos de ellos pueden hacer frente a este problema, usted todavía tiene problemas durante la recta final de todo el ancho de la imagen en el monitor.Al mismo tiempo, me gustaría ver el sitio se mostrará en todos los navegadores, por lo que deben cumplir con los requisitos krossbrauzernosti.Puede establecer un fondo de dos maneras: mediante el uso de etiquetas HTML y estilos CSS.Cada uno para sí selecciona la mejor opción.Por supuesto, el estilo CSS es mucho más conveniente, ya que el código se almacena en un archivo separado y no ocupa altavoces adicionales en las principales etiquetas de sitio, pero tenga en cuenta en primer lugar un método sencillo de crear la imagen de fondo en el sitio.

etiquetas HTML básico para crear el fondo

Así que, vaya a la pregunta de cómo hacer una imagen de fondo en html en la pantalla.Con el fin de lucir bella sitio, necesitas entender un detalle bastante importante: es suficiente con hacer un gradiente de fondo o un color sólido para pintarlo, pero si desea insertar la imagen en el fondo, no va a estirar todo el ancho de la pantalla.La imagen fue originalmente necesario para recoger o hacer su propio diseño con esta extensión, en el que se mostrará la página.Sólo cuando la imagen de fondo está lista, moverlo a una carpeta llamada «Imágenes».En ella, vamos a almacenar todas las imágenes utilizadas, animaciones y otros archivos de imagen.Esta carpeta debe estar en el directorio raíz del archivo con todo su html.Ahora se puede pasar al código.Hay varias opciones para el código de registro por el cual el patrón cambiará imagen.

  1. etiqueta atributo de escritura.
  2. través de estilos CSS en el código HTML.
  3. estilo Escribir CSS en un archivo separado.

Cómo HTML para hacer que la imagen de fondo, para que usted decida, pero me gustaría decir algunas palabras acerca de cómo iba a ser el más óptimo.El primer método es por escrito a través de una etiqueta ha sido durante mucho tiempo obsoleto.La segunda opción se utiliza muy raramente, porque resulta que una gran parte del mismo código.Una tercera opción es la más común y eficaz.Aquí están los ejemplos de etiquetas HTML:

  1. primer método de grabación a través de una etiqueta (cuerpo) en el archivo index.htm.Está escrito en esta forma: (fondo cuerpo = "Nazvanie_papki / Nazvanie_kartinki.rasshirenie") (/ cuerpo).Es decir, si tenemos una imagen con el nombre de «imágenes» y la extensión JPG, y la carpeta hemos llamado «Imágenes», entonces el registro del código HTML se vería así: (fondo cuerpo = "images / Picture.jpg") ... (/ cuerpo).Segundo método
  2. implica CSS estilo de grabación, pero está escrito en el mismo archivo con el nombre index.htm.(cuerpo style = "background: url ('../ Images / Picture.jpg')").
  3. Y el tercer método de grabación se realizan en dos archivos.El documento con la etiqueta con su nombre index.htm (cabeza) se escribe una línea como: (cabeza) (link rel = "stylesheet" type = "text / css" href = "Put_k CSS_faylu") (/ cabeza).Un archivo de estilo llamado style.css ya escribir: body {background: url (Imágenes / imagen.jpg ')}.

Cómo HTML para hacer que la imagen de fondo, discutimos.Ahora tiene que encontrar la manera de estirar la imagen a lo ancho de toda la pantalla.Métodos

de estirar el fondo de pantalla de la anchura de la ventana

imaginan nuestra pantalla en forma de porcentaje.Resulta que toda la longitud y anchura de la pantalla serán 100% x 100%.Tenemos que estirar la imagen para esta anchura.Añadir a grabar imágenes en la línea de archivo style.css que estirar la imagen para toda la anchura y la longitud del monitor.Como está escrito en su estilo de CSS?Es muy sencillo!

cuerpo

{

background: url (Imágenes / Picture.jpg ')

fondo-size: 100%;/ * Este artículo es adecuado para la mayoría de los navegadores modernos * /

}

Así que nos dimos cuenta de cómo hacer que la imagen de fondo a HTML en la pantalla.Hay un método de grabación en el archivo index.htm.Aunque este método y anticuado, pero para los principiantes, es necesario conocer y comprender.La etiqueta (cabeza) (estilo) div {background-size: cubierta;} (/ Estilo) (/ cabeza), este disco significa que destinamos una unidad especial para el fondo, que se coloca sobre toda la anchura de la ventana.Hemos considerado dos maneras de hacer que el fondo sitio web de fotos HTML, la imagen se estira a lo ancho de la pantalla en cualquiera de los navegadores modernos.

Cómo hacer un fondo fijo

Si usted decide usar la imagen como fondo el futuro de esta fuente, a continuación, sólo tiene que saber cómo hacer que lo arreglen, de modo que no se estira en longitud y no estropeó el aspecto estético.Simplemente mediante el uso de código HTML para registrar una pequeña adición.Usted necesita style.css archivo para agregar una oración después de la de fondo: url (Imágenes / Picture.jpg ') fija;o en vez añadido después del punto y coma línea separada - position: fixed.Por lo tanto, se fijará el fondo de pantalla.Durante el desplazamiento de un sitio de contenido, verá que las líneas de texto se están moviendo, pero el fondo permanece en su lugar.Así aprendió a html para que la imagen de fondo, de varias maneras.

trabajar con tablas en HTML

Muchos desarrolladores web sin experiencia, frente a mesas y unidades menudo no entienden cómo html para que la imagen fondo de la tabla.Como todos los equipos estilos HTML y CSS, el lenguaje de programación web es muy sencillo.Y la solución a este problema es escribir un par de líneas de código.Usted ya debe saber que la escritura de una tabla de filas y columnas, respectivamente, según lo indicado por las etiquetas (TR) y (td).Para hacer que el fondo de la tabla en forma de imágenes, es necesario añadir a la etiqueta (tabla), (tr) o (td) una simple frase en referencia a la imagen: Fondo = URL de la imagen.Para mayor claridad, le damos un par de ejemplos.Mesas

con fondo de imagen en lugar: ejemplos HTML

dibujar una tabla de 2x3 y lo convierten en la imagen de fondo almacenada en la carpeta "Imágenes": (fondo de la tabla = "images / Picture.jpg") (tr) (td)1 (/ td) (td) 2 (/ td) (td) 3) (/ td) (/ tr) (tr) (td) 4 (/ td) (td) 5 (/ td) (td) 6 (/ td) (/ tr) (/ tabla).Así que nuestra mesa se dibujará en el fondo de la imagen.

Ahora dibuje la misma placa tamaños de 2x3, pero insertar una imagen en un número de la columna 1, 4, 5 y 6. (tabla) (tr) (fondo td = "images / Picture.jpg") 1 (/ td)(td) 2 (/ td) (td) 3 (/ td) (/ tr) (tr) (fondo td = "images / imagen.jpg") 4 (/ td) (td fondo = "images / Picture.jpg") 5 (/ td) (fondo td =" images / imagen.jpg ") 6 (/ td) (/ tr) (/ tabla).Después de ver puede ver que el fondo aparece sólo en las células, en el que hemos registrado, pero no toda la tabla.

sitio Cross-browser

Hay una cosa tal como cross-browser recursos compatibilidad web.Esto significa que las páginas del sitio serán igualmente bien representada en los diferentes tipos y versiones de los navegadores.Debe ser código HTML y CSS para personalizar el estilo requerido por los navegadores.Por otra parte, en la era moderna de los teléfonos inteligentes, muchos desarrolladores web están tratando de crear sitios que se adaptan y una versión móvil de un ordenador y el aspecto.