Skip to main content
Revertido a la revisión 3
Origen Enlace
user128299
user128299

Para colocar una imagen de fondo, es mejor que procedas de esta forma:

  • No uses estilos inline es decir dentro de las mismas etiquetas
  • Usa la propiedad background-image para indicar el recurso que irá de fondo
  • Para cubrir usa la propiedad background-size con la opción cover
  • Si por alguna razón tu imagen no alcanza el 100 por ciento del espacio visible para cubrirla puedes hacer uso de width: 100vh;
  • Al body le quitas el margin

Quedando así:

body {
  background: url(url_tu_imagen); 
  background-size: cover;
  background-repeat: no-repeat;
  margin: 0;
  height: 100vh;
}

Ejemplo completo

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    img{
      width: 100%;
    }
    body {
      background: url(https://placekitten.com/500/500url_tu_imagen)  ; 
      background-size: cover;
      background-repeat: no-repeat;
      margin: 0;
      height: 100vh;
    }
  </style>
</head>
<body>

</body>
</html>

Para colocar una imagen de fondo, es mejor que procedas de esta forma:

  • No uses estilos inline es decir dentro de las mismas etiquetas
  • Usa la propiedad background-image para indicar el recurso que irá de fondo
  • Para cubrir usa la propiedad background-size con la opción cover
  • Si por alguna razón tu imagen no alcanza el 100 por ciento del espacio visible para cubrirla puedes hacer uso de width: 100vh;
  • Al body le quitas el margin

Quedando así:

body {
  background: url(url_tu_imagen); 
  background-size: cover;
  background-repeat: no-repeat;
  margin: 0;
  height: 100vh;
}

Ejemplo completo

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    img{
      width: 100%;
    }
    body {
      background: url(https://placekitten.com/500/500)  ; 
      background-size: cover;
      background-repeat: no-repeat;
      margin: 0;
      height: 100vh;
    }
  </style>
</head>
<body>

</body>
</html>

Para colocar una imagen de fondo, es mejor que procedas de esta forma:

  • No uses estilos inline es decir dentro de las mismas etiquetas
  • Usa la propiedad background-image para indicar el recurso que irá de fondo
  • Para cubrir usa la propiedad background-size con la opción cover
  • Si por alguna razón tu imagen no alcanza el 100 por ciento del espacio visible para cubrirla puedes hacer uso de width: 100vh;
  • Al body le quitas el margin

Quedando así:

body {
  background: url(url_tu_imagen); 
  background-size: cover;
  background-repeat: no-repeat;
  margin: 0;
  height: 100vh;
}

Ejemplo completo

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    img{
      width: 100%;
    }
    body {
      background: url(url_tu_imagen)  ; 
      background-size: cover;
      background-repeat: no-repeat;
      margin: 0;
      height: 100vh;
    }
  </style>
</head>
<body>

</body>
</html>
se añadieron 18 caracteres en el cuerpo
Origen Enlace
user128299
user128299

Para colocar una imagen de fondo, es mejor que procedas de esta forma:

  • No uses estilos inline es decir dentro de las mismas etiquetas
  • Usa la propiedad background-image para indicar el recurso que irá de fondo
  • Para cubrir usa la propiedad background-size con la opción cover
  • Si por alguna razón tu imagen no alcanza el 100 por ciento del espacio visible para cubrirla puedes hacer uso de width: 100vh;
  • Al body le quitas el margin

Quedando así:

body {
  background: url(url_tu_imagen); 
  background-size: cover;
  background-repeat: no-repeat;
  margin: 0;
  height: 100vh;
}

Ejemplo completo

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    img{
      width: 100%;
    }
    body {
      background: url(url_tu_imagenhttps://placekitten.com/500/500)  ; 
      background-size: cover;
      background-repeat: no-repeat;
      margin: 0;
      height: 100vh;
    }
  </style>
</head>
<body>

</body>
</html>

Para colocar una imagen de fondo, es mejor que procedas de esta forma:

  • No uses estilos inline es decir dentro de las mismas etiquetas
  • Usa la propiedad background-image para indicar el recurso que irá de fondo
  • Para cubrir usa la propiedad background-size con la opción cover
  • Si por alguna razón tu imagen no alcanza el 100 por ciento del espacio visible para cubrirla puedes hacer uso de width: 100vh;
  • Al body le quitas el margin

Quedando así:

body {
  background: url(url_tu_imagen); 
  background-size: cover;
  background-repeat: no-repeat;
  margin: 0;
  height: 100vh;
}

Ejemplo completo

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    img{
      width: 100%;
    }
    body {
      background: url(url_tu_imagen)  ; 
      background-size: cover;
      background-repeat: no-repeat;
      margin: 0;
      height: 100vh;
    }
  </style>
</head>
<body>

</body>
</html>

Para colocar una imagen de fondo, es mejor que procedas de esta forma:

  • No uses estilos inline es decir dentro de las mismas etiquetas
  • Usa la propiedad background-image para indicar el recurso que irá de fondo
  • Para cubrir usa la propiedad background-size con la opción cover
  • Si por alguna razón tu imagen no alcanza el 100 por ciento del espacio visible para cubrirla puedes hacer uso de width: 100vh;
  • Al body le quitas el margin

Quedando así:

body {
  background: url(url_tu_imagen); 
  background-size: cover;
  background-repeat: no-repeat;
  margin: 0;
  height: 100vh;
}

Ejemplo completo

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    img{
      width: 100%;
    }
    body {
      background: url(https://placekitten.com/500/500)  ; 
      background-size: cover;
      background-repeat: no-repeat;
      margin: 0;
      height: 100vh;
    }
  </style>
</head>
<body>

</body>
</html>
se añadieron 523 caracteres en el cuerpo
Origen Enlace
user128299
user128299

Para colocar una imagen de fondo, es mejor que procedas de esta forma:

  • No uses estilos inline es decir dentro de las mismas etiquetas
  • Usa la propiedad background-image para indicar el recurso que irá de fondo
  • Para cubrir usa la propiedad background-size con la opción cover
  • Si por alguna razón tu imagen no alcanza el 100 por ciento del espacio visible para cubrirla puedes hacer uso de width: 100vh;
  • Al body le quitas el margin

Quedando así:

body {
  background: url(url_tu_imagen); 
  background-size: cover;
  background-repeat: no-repeat;
  margin: 0;
  height: 100vh;
}

Ejemplo completo

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    img{
      width: 100%;
    }
    body {
      background: url(url_tu_imagen)  ; 
      background-size: cover;
      background-repeat: no-repeat;
      margin: 0;
      height: 100vh;
    }
  </style>
</head>
<body>

</body>
</html>

Para colocar una imagen de fondo, es mejor que procedas de esta forma:

  • No uses estilos inline es decir dentro de las mismas etiquetas
  • Usa la propiedad background-image para indicar el recurso que irá de fondo
  • Para cubrir usa la propiedad background-size con la opción cover
  • Si por alguna razón tu imagen no alcanza el 100 por ciento del espacio visible para cubrirla puedes hacer uso de width: 100vh;
  • Al body le quitas el margin

Quedando así:

body {
  background: url(url_tu_imagen); 
  background-size: cover;
  background-repeat: no-repeat;
  margin: 0;
  height: 100vh;
}

Para colocar una imagen de fondo, es mejor que procedas de esta forma:

  • No uses estilos inline es decir dentro de las mismas etiquetas
  • Usa la propiedad background-image para indicar el recurso que irá de fondo
  • Para cubrir usa la propiedad background-size con la opción cover
  • Si por alguna razón tu imagen no alcanza el 100 por ciento del espacio visible para cubrirla puedes hacer uso de width: 100vh;
  • Al body le quitas el margin

Quedando así:

body {
  background: url(url_tu_imagen); 
  background-size: cover;
  background-repeat: no-repeat;
  margin: 0;
  height: 100vh;
}

Ejemplo completo

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    img{
      width: 100%;
    }
    body {
      background: url(url_tu_imagen)  ; 
      background-size: cover;
      background-repeat: no-repeat;
      margin: 0;
      height: 100vh;
    }
  </style>
</head>
<body>

</body>
</html>
se añadieron 218 caracteres en el cuerpo
Origen Enlace
user128299
user128299
Loading
Origen Enlace
user128299
user128299
Loading