Lugar de asentamento: como facer que a imaxe de fondo HTML

Moitos web deseñadores principiantes, só para mergullo na esencia da creación de sitios web, moitas veces preguntan como imaxe de fondo HTML para facer. E algúns deles poden tratar con este problema, aínda é un problema no momento do alongamento de toda a anchura da imaxe no monitor. Ao mesmo tempo, gustaríame ver o lugar aparecen de forma idéntica en todos os navegadores, polo tanto, debe cumprir os requisitos de cross-browser. Pode configurar o fondo de dous xeitos: mediante etiquetas HTML e estilos CSS. Cada un por si escolle a mellor opción. Por suposto, estilo CSS é moito máis cómodo, porque o seu código é almacenado nun ficheiro separado e non ocupan altofalantes adicionais en etiquetas principal do sitio, pero primeiro imos considerar un método sinxelo para instalar a imaxe no fondo da páxina.

etiquetas HTML básicas para crear o fondo

Entón, imos á pregunta de como facer a imaxe de fondo HTML na pantalla. A fin de ollar fermoso sitio web, ten que entender un detalle moi importante: é o suficiente só para facer un fondo degradado ou pintar unha cor sólida, pero se ten que introducir a imaxe de fondo, non se estenderá a todo o ancho da pantalla. A imaxe foi orixinalmente necesario para incorporarse ou facer o seu propio deseño con esta extensión, en que vai amosar a páxina do sitio web. Só cando a imaxe de fondo está listo, arrastra-o para un cartafol denominada «imaxes». Nel, imos gardar todas as imaxes usadas, animacións e outros arquivos gráficos. Este cartafol debe estar situado no directorio raíz con todos os seus arquivos de HTML. Agora podes seguir adiante e ao código. Existen varias opcións para escribir código, polo cal o fondo vai cambiar a imaxe.

1. Escribir atributo tag.
2. A través de estilo CSS no código HTML.
3. Escribir estilos CSS nun arquivo separado.

Como en HTML para a imaxe de fondo, decide, pero gustaríame dicir algunhas palabras sobre como sería o máis idóneo. O primeiro método é escribir a través dun atributo de marca foi obsoleto. A segunda opción é usada moi raramente, pois parece que unha gran parte do mesmo código. Unha terceira opción é a máis común e eficaz. Aquí están algúns exemplos de etiquetas HTML:

1. O primeiro método de gravación a través do atributo tag (corpo) no ficheiro index.htm. É almacenado nesta forma: (fondo body = "folder_name / Nazvanie_kartinki.rasshirenie") (/ body). É dicir, se temos un cadro co título «imaxe» e extensión JPG, ea carpeta chamamos «imaxes», a entrada de código HTML será coma este: (fondo body = "Images / Foto.jpg") ... (/ body) .
2. O segundo método implica a gravación dun estilo CSS, pero está escrito no mesmo ficheiro co nome index.htm. (Body style = "background: url ( 'Imaxes ../ / Foto.jpg')").
3. O terceiro método de gravación é feita en dous arquivos. O documento coa tag nome index.htm (cabeza) está escrito de tal liña: (cabeza) (ligazón rel = tipo "estilo" = "text / css" href = "http: // web / artigo / 193110 /% D0% 9F % D1% 83% D1% 82% D1% 8C_% D0% BA CSS_faylu ") (/ cabeza). Un arquivo chamado estilo style.css xa escribir: body {background: url (Images / Foto.jpg ')}.

Como en HTML para a imaxe de fondo, entendemos. Agora ten que descubrir como estirar a imaxe en toda a anchura da pantalla enteira.

Formas de estirar a imaxe de fondo para o ancho da fiestra

Nós representamos a nosa pantalla en forma de porcentaxe. Acontece que toda a anchura ea lonxitude da pantalla será 100% × 100%. Necesitamos estirar a imaxe para esta ancho. Engadir á liña de gravación style.css arquivo de imaxe que vai estirar a imaxe ao longo de toda a anchura ea lonxitude do monitor. Como está escrito no estilo CSS? É sinxelo!

corpo

{

background: url (Images / Foto.jpg ')

fondo de tamaño: 100%; / * Este post é axeitado para a maioría dos navegadores * /

}

Entón, descubrimos como facer unha imaxe de fondo HTML na pantalla. Hai tamén un método de escritura no ficheiro index.htm. Aínda que este método e superada, pero para principiantes é necesario coñecer e comprender. A etiqueta (cabeza) (estilo) div {background-size: cobertura; } (/ Style) (/ cabeza), este rexistro significa que reservar unha unidade especial para o fondo, que será situado sobre todo o ancho da fiestra. Consideramos dúas formas, como facer un sitio HTML imaxe de fondo, de xeito que a imaxe é máis grande a todo o ancho da pantalla en calquera dos navegadores modernos.

Como facer un fondo fixo

Se vostede decide empregar unha imaxe como fondo do futuro de recursos web, entón só precisa saber como facelo fixo, de xeito que non é estirado na lonxitude e non romper a aparencia estética. Simplemente usando o código HTML para rexistrar un pequeno aumento. Necesitará do ficheiro style.css para engadir unha frase tras background: url (Images / picture.jpg ') fixa; ou no canto engadido despois da vírgula liña separada - Posición: fixo. Así, o fondo pode ser modificado. Durante a desprazamento de contidos na web, vai ver que o texto liñas están movendo, pero o fondo permanece no lugar. Entón aprendeu a facer imaxe de fondo HTML, de varias maneiras.

Traballando con táboas HTML

Moitos desenvolvedores web inexperientes, ante mesas e bloques, moitas veces non entenden como facer mesa background image HTML. Como todas as equipos HTML estilos e CSS, a linguaxe de programación web é moi sinxelo. E a solución a este problema é para escribir un par de liñas de código. Xa debería saber que escribir unha táboa de liñas e columnas, respectivamente, como indican as marcas (TR) e (DT). Para o fondo da táboa en forma de imaxe, cómpre engadir a etiqueta (táboa), (tr) ou (TD) unha frase simple con referencia á imaxe de referencia: background = URL fotos. Para maior claridade, damos un par de exemplos.

Táboa cunha imaxe no canto do fondo: exemplos HTML

Deseñar unha táboa 2x3 e facelo a imaxe de fondo almacenadas na carpeta "Imaxes": (fondo da táboa = "images / Foto.jpg") (tr) (TD) 1 (/ td) (TD) 2 (/ td) (TD) 3) (/ tD) (/ tr) (tr) (tD) 4 (/ tD) (tD) 5 (/ tD) (tD) 6 (/ tD) (/ tr) (/ mesa). Polo tanto, a nosa táboa será deseñado no fondo da imaxe.

Agora deseñar os mesmos tamaños de placas de 2x3, pero inserir unha imaxe nas columnas numeradas de 1, 4, 5 e 6. (táboa) (RT) (fondo td = "Fotos / Foto.jpg") 1 (/ TD) (TD) 2 (/ tD) (tD) 3 (/ tD) (/ tr) (tr) (fondo td = "Fotos / Foto.jpg") 4 (/ tD) (fondo td = "Fotos / Foto.jpg") 5 ( / td) (fondo td = "images / picture.jpg") 6 (/ td) (/ tR) (/ mesa). Despois de asistir, vemos que o fondo só aparece nesas células en que rexistraron, e non a táboa enteira.

lugar de compatibilidade cross-browser

Non existe tal cousa como un recurso compatibilidade web cross-browser. Isto significa que o seu sitio está igualmente ben exhibidos en diferentes tipos e versións de navegadores. Debe ser código HTML estilos e CSS para personalizar unha navegadores necesarias. Ademais, na era moderna dos teléfonos intelixentes, moitos desenvolvedores web están tentando crear sitios e adaptado para a versión móbil e unha mirada ordenador.