Ejemplo de Cómo poner imagen de fondo en HTML

Inicio » HTML » Cómo poner imagen de fondo en HTML
Autor: Redacción Ejemplode.com, año 2016

Para poner una imagen de fondo con HTML es necesario agregar el atributo background al tag <body> y hacer referencia a una imagen.

<html>
<body background="fondo.jpg">

<h3>Ejemplo de imagen de fondo</h3>

<p>Se pueden utilizar archivos en formato jpg, gif o png. No es recomendable usar otro formato.</p>

<p>Si la imagen es más pequeña que la página, se repetirá en mozaico.>

</body>
</html>

Escriban sus sugerencias.

Citado APA: (A. 2009,01. Ejemplo de Cómo poner imagen de fondo en HTML. Revista Ejemplode.com. Obtenido 01, 2009, de http://www.ejemplode.com/17-html/532-ejemplo_de_como_poner_imagen_de_fondo_en_html.html)

¡Ayúdanos a ayudarte! Por favor comparte este artículo.

  
Autor: Redacción Ejemplode.com, año 2016

Búsqueda:

Búsqueda personalizada

Comentarios:

  1. hola alguien sabe porq no se ve el iphone cuando pones un background url( imagen.jpg) fixed no repeat; o que nme hace falta poner
    Por david 07.21.16 a las 16:18:41
    1. Muy bueno, me ayudó muchísimo
      Por alizon 03.28.15 a las 1:48:13
      1. Muchas gracias, la verdad me gustaría saber si es posible que en lugar de colocar el nombre de la imagen sea posible colocar un url, para que la imagen que quiero que aparezca esté en internet, por ejemplo este fondo ( https://31.media.tumblr.com/adccaca5cba2a87f5b6735c61bedde1d/tumblr_n5jg8dKNJn1rcfl8so7_75sq.png ) y que, aunque no esté en mi computadora, aparezca. ¡Muchas gracias! Espero puedan responderme pronto, me es de urgencia. PD: Cabe mencionar que estoy \'publicando\' una página web como proyecto escolar de mi profesor (subdominio con hosting gratis) y ahí es donde trato de colocar mi código html, pero no me aparece el fondo. Estoy en el host \"Hostinger\" y el constructor de sitio web \"Zyro\", espero tener respuesta. ¡Gracias nuevamente!
        Por MLee 05.14.14 a las 0:40:31
        1. Muchas gracias, me sirvió para algo especial.
          Por JEss 01.19.14 a las 15:16:40
          1. Gracias, me ha servido.
            Por cristhian 11.06.13 a las 19:37:49
            1. Para que no se repita tienes que darle estilo

              style=\"background-image: url(/images/fondo1.jpg); background-repeat: no-repeat;\"

              se lo das dentro del body... eso
              Por DracoSkin 03.20.13 a las 14:51:34
              1. La verdad me sirvió de mucho, muchas gracias.
                Por Karl0Z! 03.14.13 a las 21:15:31
                1. Puse la imagen en el html de un newsletter. En el MAC, se ve perfecto, pero en el PC no veo la imagen de fondo. Probé poniéndolo en el CSS y nada, pasa lo mismo... Alguien sabe por qué pasa esto?
                  Por carolina 10.31.12 a las 12:59:16
                  1. Gracias, es muy útil, ahora ya se poner fondo en mí página.
                    Por Erendira 10.15.12 a las 20:25:05
                    1. Solo tienes que hacer una carpeta donde tengas la imagen y después es en el html lo pones, solo esto.
                      Por julio cesar ramirez sanchez 07.12.12 a las 20:21:41
                      1. ¿Cómo se puede poner música en html?
                        Por oscar enrique cano 04.20.12 a las 1:32:16
                        1. Lo que tu quieres se hace con CSS y se llama fondo fijo.
                          Por Morris 03.27.12 a las 21:31:00
                          1. Todos explican lo mismo, pero nadie o casi nadie explica como poner el fondo con imagen repetida SOLO EN EL BODY de la pagina, o sea en el área donde vaya la información.
                            Por Eduardo 03.27.12 a las 20:12:52
                            1. Muchas gracias me ayudó demasiado.
                              Por chanti 03.15.12 a las 23:27:07
                              1. Buenisimo, no se mucho de como utilizar el html pero me has ayudado bástante. Gracias!
                                Por Laura 02.25.12 a las 14:22:42
                                1. muy util
                                  Por edwin 11.25.11 a las 16:54:55
                                  1. BUENA LA PAGINA PORQUE AYUDA A MUCHOS QUE NO SABEN COMO MANIPULAR SU CORREO. GRACIAS
                                    Por NELLY CARREÑO 10.08.11 a las 15:42:28
                                    1. Tienes que poner la imagen en la misma carpeta que el archivo. Procura no usar espacios en blanco.
                                      Por Morris 09.08.11 a las 1:48:37
                                      1. No eh podido poner la imagen sólo me aparece un cuadrito pequeño con una X en el centro, pero nada.
                                        Por Felipe 09.07.11 a las 23:50:46
                                        1. Para que no se repita debes ponerla con CSS y no con HTML.
                                          Por Morris 08.31.11 a las 17:29:36
                                          1. No consigo poner la imagen de fondo sin repetirse
                                            Por bere si alcool 08.31.11 a las 16:20:52
                                            1. Have no a lot of cash to buy a building? Do not worry, just because that is available to receive the mortgage loans to work out all the problems. Thence get a short term loan to buy everything you need.
                                              Por HARRISONRosanne 07.26.11 a las 16:03:23
                                              1. Muchas gracias!
                                                Por marisol 06.12.11 a las 19:17:05
                                                1. muy interesante
                                                  Por Paty 06.05.11 a las 22:39:20
                                                  1. como se pone
                                                    Por Habbo.lu 06.04.11 a las 23:21:30
                                                    1. Muy bueno
                                                      Por Diego 04.25.11 a las 17:03:21
                                                      1. Muy bueno, muchas gracias
                                                        Por Eduardo 04.24.11 a las 0:43:43
                                                        1. Glande sucio!!
                                                          Por paco 04.05.11 a las 18:44:35
                                                          1. me fue muy util gracias
                                                            Por estela fuentes 03.07.11 a las 16:39:19
                                                            1. Susuke, pues pones la ruta completa a la imagen:

                                                              http://www.ejemplode.com/design/images/logo.jpg
                                                              Por Morris 02.21.11 a las 16:15:13

                                                              Deja un comentario



Tweet