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
estilofondomulticolor.css
pero en principio te bastaría con añadirle width y height 100% a tu imagen.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.