1

quiero que esta imagen llene toda la pantalla el codigo de html es:

esta imagen quiero que ocupa toda la pagina introducir la descripción de la imagen aquí

codigo html es:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>fondo multicolor</title>
        <link rel="stylesheet" href="estilofondomulticolor.css">
    </head>
    <body>
        <div class="arcoiris"> 
            <img src="https://i.pinimg.com/originals/4c/44/b8/4c44b8de8a859a119a84512df8b506b2.jpg" alt="magen multicolor">
        </div>
    </body>
</html>

soy principiante en esto :D

4
  • No sé qué css tienes en el archivo estilofondomulticolor.css pero en principio te bastaría con añadirle width y height 100% a tu imagen.
    – Benito-B
    el 22 dic. 2021 a las 23:00
  • no funciona, ya lo intente y no cambia la imagen
    – maxx
    el 22 dic. 2021 a las 23:03
  • Literalmente acabo de probar en un archivo con tu código, añadiéndole style="height: 100%; width: 100%" al tag de img y funciona. Así que o estás viendo una versión cacheada de la página (se debe desactivar la caché cuando se está trabajando con estilos!) o no estás poniéndole bien el css en tu archivo de estilos.
    – Benito-B
    el 22 dic. 2021 a las 23:05
  • ahi esta, ahi pude :D, una pregunta mas si no te molesto, si lo quiero hacer como si fuera un fondo, que agarre bien la ventana de la pagina, como lo deberia hacer? (no se si me entendiste jaja)
    – maxx
    el 22 dic. 2021 a las 23:17

1 respuesta 1

3

Para ampliar llenar la pantalla con una imagen, y basandonos en tu código incial y tal como te han indicado, debes modificar esta línea:

<img src="https://i.pinimg.com/originals/4c/44/b8/4c44b8de8a859a119a84512df8b506b2.jpg" alt="magen multicolor">

por esta otra, donde agregamos una anchura del 100% (propiedad width) y una altura tambien al 100% (propiedad height):

<img style="width:100%; height:100%" src="https://i.pinimg.com/originals/4c/44/b8/4c44b8de8a859a119a84512df8b506b2.jpg" alt="magen multicolor">

De tal forma que quedaria asi:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>fondo multicolor</title>
        <link rel="stylesheet" href="estilofondomulticolor.css">
    </head>
    <body>
        <div class="arcoiris"> 
            <img style="width:100%; height:100%" src="https://i.pinimg.com/originals/4c/44/b8/4c44b8de8a859a119a84512df8b506b2.jpg" alt="magen multicolor">
        </div>
    </body>
</html>

Con eso llenas el contenedor donde esta la imagen, en tu caso el contenedor es <div class="arcoiris"> que esta dentro de <body> y como no hay nada más lo llenas todo.

Ante tu otra pregunta, de como hacerlo pero usándolo de fondo, una solución es agregar estilos CSS dentro de la etiqueta <head></head>. Para agregar estilos CSS se usa la etiqueta <style></stlye>. Por lo tanto quedaria así:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>fondo multicolor</title>
        <link rel="stylesheet" href="estilofondomulticolor.css">
    </head>
    <style>
    body {
      background-image: url("https://i.pinimg.com/originals/4c/44/b8/4c44b8de8a859a119a84512df8b506b2.jpg");
      background-size: cover; 
    }
    </style>
    <body>
        <div class="arcoiris"> 
        </div>
    </body>
</html>

En este segundo caso fijate en el código agregado:

   <style>
    body {
      background-image: url("https://i.pinimg.com/originals/4c/44/b8/4c44b8de8a859a119a84512df8b506b2.jpg");
      background-size: cover; 
    }
   </style>

Y que he suprimido la imagen del <div class="arcoiris"></div> dejándolo vacio, pues se solaparian y el resultado podria ser imprevisible.

Explicación CSS:

body{}: Dentro de este segmento de CSS vamos a poner las propiedades CSS del elemento <body> del documento que engloba cualquier contenido visible.

background-image: esta propiedad nos permite poner la URL de la imagen que queremos como fondo

background-size: cover: El valor cover nos indica que la propiedad de tamaño del fondo (background-size) va a ser de forma completa, ocupando todo el espacio disponible para el elemento que lo contiene, en este caso, body

5
  • esto era, muchas gracias
    – maxx
    el 22 dic. 2021 a las 23:54
  • @maxx: Si consideras que la respuesta es correcta a tu pregunta deberias aceptarla para que la comunidad lo vea y no siga dando respuestas y no quede siempre abierta, gracias. Para ello creo que debes marcar debajo de las flechas de valoración un checkbox que hay para aceptar.
    – masterguru
    el 22 dic. 2021 a las 23:56
  • si, pero no se como hacer para cerrar la pregunta, no se donde esta las flechas
    – maxx
    el 23 dic. 2021 a las 0:03
  • je, bueno, yo tampoco (nunca he hecho una pregunta) pero diria que al principo de mi respuesta hay las flechas y justo debajo de ellas tendria que haber "algo" para marcar la respuesta como "Aceptada", una casilla seguramente, y con eso ya bastaria
    – masterguru
    el 23 dic. 2021 a las 0:35
  • @maxx: Por fin encontré la forma de explicate como aceptar la respuesta. Mira en este enlace y aprenderas la manera y el porque hacerlo, gracias: es.meta.stackoverflow.com/a/428/263200
    – masterguru
    el 31 dic. 2021 a las 6:21

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.