Si desea agregar una imagen a una página web, todo lo que necesita es HTML. Si desea establecer una imagen como fondo para una página web, necesitará HTML y CSS. HTML significa lenguaje de marcado de hipertexto y es un código que le dice a un navegador qué mostrar en una página web. CSS significa hojas de estilo en cascada y se utiliza para cambiar la apariencia y el diseño de una página web. Necesitará una imagen de fondo que le gustaría usar para su página web.
Parte 1
- Cree una carpeta para guardar su archivo HTML y la imagen de fondo. En su computadora, cree y asigne un nombre a una carpeta que pueda encontrar fácilmente más tarde. Empresa de diseño web
- Puede nombrar la carpeta como desee, pero cuando trabaje con HTML, es mejor acostumbrarse a nombrar archivos y carpetas con nombres cortos de una sola palabra.
2. Coloque la imagen de fondo en la carpeta HTML. Ponga la imagen que le gustaría usar como fondo en la carpeta HTML.
- Si no está demasiado preocupado por garantizar que su sitio web funcione bien en dispositivos más antiguos con conexiones a Internet más lentas, debe estar seguro de usar una imagen de mayor resolución como fondo. Las imágenes simples con patrones ligeros y repetitivos también son una buena opción al elegir una imagen de fondo para que pueda leer cualquier texto sobre ella.
- Si no tiene una imagen, puede descargar una imagen de fondo gratuita. Si descarga una imagen, colóquela en la carpeta HTML que creó.
3. Crear un archivo HTML. Abra un editor de texto y luego cree un nuevo archivo. Guarde el archivo como index.html.
- Puede utilizar cualquier editor de texto que desee, incluso los editores de texto del sistema proporcionados por Windows, el Bloc de notas y Mac OS X, TextEdit.
- Si desea utilizar un editor de texto destinado a trabajar con HTML, descargue Atom, un editor de texto que funciona en los sistemas operativos Windows, Mac OS X y Linux.
- Si está utilizando TextEdit, antes de comenzar a escribir el archivo HTML, haga clic en el menú Formato y luego haga clic en Crear texto sin formato. Esta configuración asegurará que el archivo HTML se cargue correctamente en un navegador web.
- Los procesadores de texto, como Microsoft Word, no son excelentes para escribir HTML, porque agregan caracteres invisibles y formatos que pueden romper un archivo HTML para que no se muestre correctamente en un navegador web. Empresa de desarrollo web
Parte 2
Escribir el archivo HTML
- Copie y pegue el código HTML estándar. Seleccione y copie el código HTML a continuación, y luego péguelo en su archivo index.html abierto.
Título de la página
cuerpo {
imagen de fondo: url (“”);
}
2 Agregue la URL de la imagen de fondo. En el archivo index.html, busque la línea background-image: url (“”); . Mueva el cursor entre paréntesis y luego escriba el nombre del archivo de imagen de fondo. Asegúrese de incluir la extensión del archivo de imagen de fondo.
Cuando haya terminado, debería verse así:
background-image: url (“background.png”);
Cuando usa un nombre de archivo sin una ruta de archivo o URL, el navegador web buscará en la carpeta de la página web la imagen nombrada. Si el archivo está en otra carpeta en su sistema de archivos, deberá agregar la ruta completa a ese archivo. Desarrollo de aplicaciones móviles Android
3. Guarde el archivo HTML.
Parte 3
Revisando el archivo HTML
1. Abra el archivo HTML en un navegador web. Haga clic con el botón derecho en el archivo index.html y luego ábralo en el navegador web que elija.
- Cuando se abre el navegador, si no ve la imagen, asegúrese de que el nombre del archivo de imagen esté escrito correctamente en la ventana del editor de texto index.html.
- Cuando se abre el navegador, si ve código HTML en lugar de la imagen de fondo, su archivo index.html se guardó como un documento de texto enriquecido. Es posible que desee intentar editar el archivo HTML en un editor de texto diferente.
2 Realice modificaciones en el archivo HTML. En la ventana del editor de texto, mueva el cursor entre las etiquetas y luego escriba Hello world! . Vuelva a cargar la ventana del navegador para ver el texto en la parte superior de la imagen de fondo.
Parte 4
Comprender el código HTML
- Comprender las etiquetas HTML y CSS. El código HTML está compuesto por etiquetas abiertas y cerradas. La etiqueta es la etiqueta de cuerpo abierto y es la etiqueta de cuerpo cerrado. Cada etiqueta abierta en una página HTML debe tener una etiqueta de cierre para que la página se muestre correctamente.
2. Comprenda la etiqueta DOCTYPE. Toda página HTML bien escrita debe comenzar con . Esto le dice a un navegador web que el archivo HTML es un archivo HTML.
3. Realice modificaciones en el archivo HTML. En la ventana del editor de texto, mueva el cursor entre las etiquetas y luego escriba Hello world! . Vuelva a cargar la ventana del navegador para ver el texto en la parte superior de la imagen de fondo. Construye un sitio web
4. Comprender las etiquetas HTML y CSS. El código HTML está compuesto por etiquetas abiertas y cerradas. La etiqueta es la etiqueta de cuerpo abierto y es la etiqueta de cuerpo cerrado. Cada etiqueta abierta en una página HTML debe tener una etiqueta de cierre para que la página se muestre correctamente.
5. Comprender la etiqueta del título. La etiqueta
es el texto que aparece en la barra de título de la ventana de su navegador, así como el texto que se muestra en una pestaña del navegador. </p>
<p> 6. <b>Comprender la etiqueta de estilo.</b> La etiqueta marca el contenido CSS. Todo entre las etiquetas es código CSS. </p>
<p> 7. <b>Comprender la etiqueta del cuerpo.</b> Cualquier texto escrito entre las etiquetas aparecerá como escrito, a menos que sea un código HTML o CSS. </p>
<p> 8. <b>Realice ediciones en el archivo HTML.</b> En la ventana del editor de texto, mueva el cursor entre las etiquetas y luego escriba “¡Hola, mundo!”. Vuelva a cargar la ventana del navegador para ver el texto en la parte superior de la imagen de fondo. </p>
<p> <b>Parte 5</b> </p>
<p> <b>Comprender el código CSS</b> </p>
<p> 1. <b>Comprender el código CSS.</b> En su código index.html, el código CSS entre las etiquetas le dice al navegador web que agregue una imagen de fondo con un nombre específico a la etiqueta cuando se muestre la página web. </p>
<p> 2. <b>Revise el código CSS.</b> </p>
<p> cuerpo { </p>
<p> background-image: url (“background.png”); </p>
<p> } </p>
<p> 3. <b>Comprender las partes del código CSS.</b> Los estilos CSS se componen de dos partes, el selector y la declaración. </p>
<p> En el ejemplo, <i>body</i> es el selector y <br /> <i>background-image: url (“background.png”)</i> es la declaración. </p>
<p> Un selector puede ser cualquier etiqueta HTML. </p>
<p> Las declaraciones siempre van entre llaves {}. </p>
<p> 4. <b>Comprender la declaración CSS.</b> La declaración CSS se compone de dos partes, la propiedad y el valor. Entre las llaves, <br /> <i>background-image</i> es la propiedad y <i>url (“background.png”)</i> es el valor. </p>
<p> La propiedad describe lo que se está diseñando y el valor describe cómo se diseña la propiedad. </p>
<p> La propiedad y el valor siempre están separados por dos puntos:. </p>
<p> Las declaraciones CSS siempre terminan en punto y coma; </p>
<!-- Ezoic - mid_content - mid_content -->
<div id="ezoic-pub-ad-placeholder-103"> </div>
<!-- End Ezoic - mid_content - mid_content -->
<div id="tags" class="mb-2">
<span class="btn btn-outline-info btn-xs m-1"><a href="https://tech.gobetech.com/note/desarrollo" rel="tag">Desarrollo</a></span><span class="btn btn-outline-info btn-xs m-1"><a href="https://tech.gobetech.com/note/diseno" rel="tag">Diseño</a></span><span class="btn btn-outline-info btn-xs m-1"><a href="https://tech.gobetech.com/note/sitios-web" rel="tag">Sitios web</a></span><span class="btn btn-outline-info btn-xs m-1"><a href="https://tech.gobetech.com/note/web" rel="tag">web</a></span> </div>
</article>
</div>
<div class="my-3 px-3 pb-2 bg-light rounded shadow-sm relate"><p class="py-2 mb-0">Related Content</p><p class="p-2 mb-0 border-top border-gray">
<a href="https://tech.gobetech.com/7480/como-preparo-los-terminos-y-condiciones-para-mi-sitio-web.html" rel="bookmark" class="nav-link p-0">¿Cómo preparo los 'Términos y condiciones' para mi sitio web?</a></p><p class="p-2 mb-0 border-top border-gray">
<a href="https://tech.gobetech.com/20915/puedo-criticar-legalmente-el-articulo-de-alguien-en-mi-sitio-web.html" rel="bookmark" class="nav-link p-0">¿Puedo criticar legalmente el artículo de alguien en mi sitio web?</a></p><p class="p-2 mb-0 border-top border-gray">
<a href="https://tech.gobetech.com/19857/cual-es-la-mejor-manera-de-crear-un-sitio-web-de-eventos.html" rel="bookmark" class="nav-link p-0">¿Cuál es la mejor manera de crear un sitio web de eventos?</a></p><p class="p-2 mb-0 border-top border-gray">
<a href="https://tech.gobetech.com/40508/por-que-los-sitios-web-de-muchas-instituciones-y-empresas-destacadas-todavia-parecen-de-los-anos-90.html" rel="bookmark" class="nav-link p-0">¿Por qué los sitios web de muchas instituciones y empresas destacadas todavía parecen de los años 90?</a></p><p class="p-2 mb-0 border-top border-gray">
<a href="https://tech.gobetech.com/56017/le-importaria-a-jimmy-wales-si-descargo-todo-el-contenido-en-wikipedia-y-comienzo-mi-propio-sitio-web-comercial-con-publicidad-para-competir-directamente-con-wikipedia-y-pagar-a-los-editores-por.html" rel="bookmark" class="nav-link p-0">¿Le importaría a Jimmy Wales si descargo todo el contenido en Wikipedia y comienzo mi propio sitio web comercial con publicidad para competir directamente con Wikipedia y pagar a los editores por sus ediciones en lugar de pedirles que lo hagan de forma gratuita?</a></p></div>
<div class="row mx-0">
<div class="col-md-6 text-left bg-white shadow-sm py-2"><a href="https://tech.gobetech.com/25063/como-debo-evitar-que-youtube-y-otros-sitios-web-arruinen-mi-tiempo-libre.html" rel="prev">¿Cómo debo evitar que YouTube y otros sitios web arruinen mi tiempo libre?</a></div>
<div class="col-md-6 text-right bg-white shadow-sm py-2"><a href="https://tech.gobetech.com/25065/vale-la-pena-hacer-un-sitio-personal.html" rel="next">¿Vale la pena hacer un sitio personal?</a></div>
</div>
<div class="card my-3 border-0 shadow-sm">
<div class="card-body">
<p> <b><i>Puedes lograrlo de dos maneras:</i></b> </p>
<p> Mediante el uso de HTML o mediante CSS. Entonces, te proporcionaré el código para ambos casos </p>
<p> En HTML, puede usar el atributo de <code>background</code> para definir el fondo. </p>
<p> En CSS, puede usar la propiedad de <code>background-image</code> que especifica una imagen para usar como fondo de un elemento. </p>
<p> <html> <br /> <head> </head></html></p>
<p><style type = "text / css"> / * Fondo en CSS * / <br /> cuerpo { <br /> background-image: url ("paper.gif"); <br /> posición de fondo: arriba a la derecha; <br /> } <br /> </style>
</p>
<p> <body background = "paper.gif"> </p>
<h1> Este es el código </h1>
<p> </body> </p>
</div>
<div class="card-footer text-right py-1">
<small class="text-muted">Bhupendra Singh Rathore</small>
</div>
</div>
</li><!-- #comment-## -->
<div class="card my-3 border-0 shadow-sm">
<div class="card-body">
<p> Los sitios web modernos normalmente usan CSS para controlar la apariencia del diseño. Le recomendaría que diseñe el diseño de su sitio web frontend utilizando los archivos css en lugar de codificarlo directamente en la página. Sin embargo, te mostraré cómo hacer ambas cosas. Vaya a su archivo custom.css (a veces style.css o main.css) o donde quiera que esté agregando sus ediciones css personalizadas. Se ubicarán en el directorio principal de sus temas en una carpeta css /. Puede hacer esto con un cliente ftp como filezilla o mediante un panel de hosting como cpanel y luego usando el administrador de archivos-> Editor de archivos </p>
<p> <b>Nota: Cree una copia de seguridad de cualquier archivo que vaya a editar.</b> </p>
<p> Nota: Si el tema es enorme y complicado, puede utilizar un agente de programa para analizar el código o archivo de texto. Si tiene los archivos CSS, puede usar una buena búsqueda de editores de código para encontrarlos, los recomendados serían sublimes, notepad ++ </p>
<p> Ábralo en una edición de texto y busque el siguiente código si ya es una imagen de fondo o agregue este código CSS, con rutas actualizadas </p>
<p> cuerpo { </p>
<p> Probablemente habrá más artículos aquí <br /> background-image: url (“ruta de la imagen aquí”); <br /> color de fondo: #cccccc; <br /> } </p>
<p> Si aún no tiene este CSS, busque el elemento ‘cuerpo’ agregar agregar </p>
<p> background-image: url (“ruta de la imagen aquí”); entre {} reemplazar mi texto con la ruta a su imagen </p>
<p> Puede tener múltiples imágenes de fondo utilizando este código CSS code </p>
<p> background-image: url (“ruta de la imagen aquí”), url (“ruta de la imagen aquí”); </p>
<p> <b>Y la sintaxis CSS de fondo completa es:</b> </p>
<p> imagen de fondo: <i>url</i> | ninguno | inicial | heredar; </p>
<p> Para codificarlo en el encabezado, agregue lo siguiente antes: </p>
<p><style type = text / css> </style>
</p>
<p> cuerpo { <br /> background-image: url ("ruta de la imagen aquí"); <br /> color de fondo: #cccccc; <br /> } </p>
</p>
<p> Si desea agregar una imagen de fondo a un elemento de la página con codificación rígida, puede agregar una identificación / elemento CSS personalizado a su estilo codificado, como, </p>
<p> mycustombackground { </p>
<p> background-image: url (“ruta de la imagen aquí”); </p>
<p> } </p>
<p> Luego agregue este elemento como una clase o id </p>
<p> o </p>
<p> hacer la práctica aún peor de codificar CSS en línea como esta </p>
<p><div style = ”background-image: url (“ ruta de imagen aquí ”);”> </div>
</p>
<p> Sus cosas aquí </p>
</p>
<p> A veces, si está codificando el estilo CSS, deberá decirle al navegador que el estilo codificado anula cualquier estilo agregando un ‘! Importante’ después de su código de estilo pero antes de; cerca, así </p>
<p><div style = ”background-image: url (“ ruta de imagen aquí ”)! important;”> </div>
</p>
<p> Sus cosas aquí </p>
</p>
<p> Esta misma técnica a veces puede ser necesaria si tiene muchos elementos de estilo en un tema más grande y complicado. Sin embargo, no es realmente la mejor práctica, pero hará el trabajo cuando tengas poco tiempo o trabajes para hacer algunas ediciones. </p>
<p> Diré nuevamente que la mejor práctica es usar sus archivos de estilo para las ediciones, preferiblemente usando un nuevo archivo custom.css para sus ediciones personalizadas, en lugar de editar los archivos style.css o main.css del tema. </p>
<p> Algunos grandes no! <br /> No edite directamente los archivos CSS de las plataformas frontend como zurb, bootstrap, etc. </p>
<p> No intente editar archivos .css minificados </p>
<p> Sí, puedes hacerlo, pero estás pidiendo problemas en el futuro. </p>
<p> Algunas mejores prácticas! </p>
<p> Mantenga siempre una copia de seguridad del archivo que ha editado. </p>
<p> Siempre haga una copia de seguridad completa antes de tocar cualquier cosa y mantenga un archivo de ellas. </p>
<p> Siempre trate de evitar el estilo en línea </p>
<p> Siempre trate de usar un archivo custom.css </p>
<p> No olvide verificar que su archivo .css personalizado se agrega al encabezado. </p>
<p> Consejos de WordPress: </p>
<p> Si está editando en WordPress, puede acceder al CSS a través del método anterior. También puede editar estos archivos a través del editor de archivos en la configuración desde la consola de administración. Además, algunos editores frontedit cms como visual composer le permitirán agregar css personalizados desde la consola cms. </p>
</div>
<div class="card-footer text-right py-1">
<small class="text-muted">Meghana Goud</small>
</div>
</div>
</li><!-- #comment-## -->
<div class="card my-3 border-0 shadow-sm">
<div class="card-body">
<p> <i>es realmente simple, use la</i> <b><i>propiedad de imagen de fondo para establecer la imagen de fondo:</i></b> <i>luego, imite la imagen según sus requisitos, como</i> <b><i>background-repeat: no-repeat;</i></b> <b><i>etc …</i></b> </p>
<p> <i>solo siga este código: – códigos …</i> </p>
<p><img src="http://qc.miximages.com/main-qimg-67ab5f15ed48f841e4dc57216c4734f2"/></p>
<p> <i>y la salida es: –</i> </p>
<p><img src="http://qc.miximages.com/main-qimg-5aa46bde4fcdaf2879c79bca934ded8b"/></p>
<p> <i>Espero que te ayude…</i> </p>
</div>
<div class="card-footer text-right py-1">
<small class="text-muted">Nicholas Maietta</small>
</div>
</div>
</li><!-- #comment-## -->
<div class="card my-3 border-0 shadow-sm">
<div class="card-body">
<p> puedes hacerlo de dos maneras por HTML o usando CSS <br /> mediante el uso de CSS </p>
<p> <! DOCTYPE html> </p>
<p> <html> </html></p>
<p> <head> </head></p>
<p><style> </style>
</p>
<p> cuerpo { </p>
<p> background-image: url ("paper.gif"); </p>
<p> } </p>
</p>
<p> <cuerpo> </cuerpo></p>
<p><h1> ¡Hola, mundo! </h1>
</p>
<p> ¡Esta página tiene una imagen como fondo! </p>
</p>
<p> para obtener más información, consulte los fondos de CSS, ¡lo ayudará más! </p>
</div>
<div class="card-footer text-right py-1">
<small class="text-muted">OpenDev Technologies Pvt.</small>
</div>
</div>
</li><!-- #comment-## -->
<div class="card my-3 border-0 shadow-sm">
<div class="card-body">
<p> Lo más fácil, y creo que la mejor manera de responder es poner un div con la imagen. Use CSS en todas las posiciones de divs: relativo con un índice z de 2. Luego, indexe z el div de fondo con un valor de 1. De esta manera, se ubicará detrás de todos los demás divs. </p>
<p> A continuación, configure el div de fondo en la parte superior: 0; izquierda: 0; esto asegurará que comience en la esquina superior izquierda de la página. </p>
<p> Ahora configure el div de fondo y la imagen interior en ancho: 100% y altura: 100%. Esto asegurará que llene la pantalla de borde a borde. </p>
<p> Se asegura de borrar todo el relleno y los márgenes para que no pase nada gracioso. Esto ya debería haberse manejado a través de la normalización del navegador de todos modos. </p>
<p> La razón por la que es mejor responder es porque tiene el mismo valor sin importar los medios que se estén viendo. </p>
<p> Entonces su CSS se verá más o menos así: </p>
<p> div {posición: relativa; índice z: 2} </p>
<p> div.background-image {altura: 100%; izquierda: 0; margen: 0; relleno: 0; posición: absoluta; arriba: 0; ancho: 100%; índice z: 1} </p>
<p> div.background-image img {altura: 100%; ancho: 100%} </p>
<p> Para el SEO y la velocidad de carga de la página, pondría la imagen de fondo como el último recurso en la página. No hay razón para tener esa carga primero; su página no debe depender de la imagen de fondo. Si es así y es porque la imagen es oscura y el texto es blanco; use background: # 000 para asegurarse de establecer el fondo negro para que el texto sea legible. </p>
<p> Para tener en cuenta: el uso de fondo negro con texto blanco rara vez se adhiere a los estándares de accesibilidad. Por lo tanto, debe evitarse a menos que sepa cómo tratar la accesibilidad. </p>
<p> <cuerpo> </cuerpo></p>
<p><div> [contenido de tu página] </div>
</p>
<p><div class = “background-image”> <img src = “[su ruta de la imagen]”/> </div></p>
</div>
<div class="card-footer text-right py-1">
<small class="text-muted">Rohan Mishra</small>
</div>
</div>
</li><!-- #comment-## -->
<div class="card my-3 border-0 shadow-sm">
<div class="card-body">
<p> puede usar los códigos a continuación para el fondo de la imagen. </p>
<p> <! DOCTYPE html> <br /> <html> <br /> <head> <br /> <title> Nueva página
https://anupammondal.in/img/home/Anupam%20Mondal%2009302012.jpg“> ;
Imagen de fondo
o puedes usar este
Nueva página
https://anupammondal.in/img/home/Anupam%20Mondal%2009302012.jpg ); background-size: cover;”>
Imagen de fondo
o puedes usar este
Nueva página
Imagen de fondo
Puedes usar cualquiera de ellos
