Skip to main content
Relanzada por el usuario Comunidad
Relanzada por el usuario Comunidad
Relanzada por el usuario Comunidad
se eliminaron 32 caracteres en el cuerpo; etiquetas editadas; título editado
Origen Enlace
fedorqui
  • 16.7k
  • 24
  • 71
  • 134

Problema de definicion de imagen de fondo de ¿Cómo hago para que una web - Problemaimagen ocupe toda la pantalla?

tengo el siguiente problema, comoComo ven en la imagen tengo una etiqueta IMG, okey pero lo que necesito yo es que abarque todo la pantalla y estuve agregandoles.

Estuve agregándoles las siguientes style css y sucedia esto:

mis intentos fueron estos :

  • WIDTH:100% - problema: se distorcionada y se veia muy alargada
  • display:block - se alargaba la imagen mucho y no se veia bien.
  • Agregarla en un header y alargarla pero mi problema es que necesitaba que esa imagen me mande a otra pagina, estuve viendo un codigo que se podia hacero eso, pero quiero saber si no existe otra forma de posicionar la imagen completa en la pantalla sin que distorcione cuando llege a version movil.

Mi codigo:

<!DOCTYPE html>
<html>
<head>
    <title>Rosa Susana</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Droid+Serif:400,700,700i" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" >
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/estilos.css">
    <link rel="icon" type="image/png" href="Logo para web.svg" />
  <style type="text/css">
  
  body{
    margin:0;
    padding:0;
    background:#000000;
    background-attachment:fixed;
    background-size:100% 100%;
    border:3px solid orange;
    left:10px;
    padding-top:10%;
    padding-left:3%;
/*border:1px solid #FFFF00; 

}

  #iniciar{
    text-decoration:none;
    color:black;
}
  </style>
</head>
<body>
<br><br><br><br>
<br><br><br>
<br><br>
<center>
<div class="container">
    <a href="inicio.html">
<img class="img-responsive" src="inicio.jpg" >

</div>
<br><br><br>
<br><br><br>
<center>
<a href="https://www.facebook.com/Rancho-Rosa-Susana-193044927891849/
" class="btn btn-primary">
    <span class="fa fa-facebook"></span> Facebook
  </a><br><br>
   <a style="background:red;border:none;" href="https://www.youtube.com/channel/UCB41yyo-wrldZQchu_tM3dA" class="btn btn-primary">
    <span class="fa fa-youtube"></span>  Youtube
  </a><br>
</a><br>
<br><br><br><br>
<br><br>

</body>
</html>

introducir la descripción de la imagen aquí

Problema de definicion de imagen de fondo de una web - Problema

tengo el siguiente problema, como ven en la imagen tengo una etiqueta IMG, okey pero lo que necesito yo es que abarque todo la pantalla y estuve agregandoles las siguientes style css y sucedia esto:

mis intentos fueron estos :

  • WIDTH:100% - problema: se distorcionada y se veia muy alargada
  • display:block - se alargaba la imagen mucho y no se veia bien.
  • Agregarla en un header y alargarla pero mi problema es que necesitaba que esa imagen me mande a otra pagina, estuve viendo un codigo que se podia hacero eso, pero quiero saber si no existe otra forma de posicionar la imagen completa en la pantalla sin que distorcione cuando llege a version movil.

Mi codigo:

<!DOCTYPE html>
<html>
<head>
    <title>Rosa Susana</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Droid+Serif:400,700,700i" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" >
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/estilos.css">
    <link rel="icon" type="image/png" href="Logo para web.svg" />
  <style type="text/css">
  
  body{
    margin:0;
    padding:0;
    background:#000000;
    background-attachment:fixed;
    background-size:100% 100%;
    border:3px solid orange;
    left:10px;
    padding-top:10%;
    padding-left:3%;
/*border:1px solid #FFFF00; 

}

  #iniciar{
    text-decoration:none;
    color:black;
}
  </style>
</head>
<body>
<br><br><br><br>
<br><br><br>
<br><br>
<center>
<div class="container">
    <a href="inicio.html">
<img class="img-responsive" src="inicio.jpg" >

</div>
<br><br><br>
<br><br><br>
<center>
<a href="https://www.facebook.com/Rancho-Rosa-Susana-193044927891849/
" class="btn btn-primary">
    <span class="fa fa-facebook"></span> Facebook
  </a><br><br>
   <a style="background:red;border:none;" href="https://www.youtube.com/channel/UCB41yyo-wrldZQchu_tM3dA" class="btn btn-primary">
    <span class="fa fa-youtube"></span>  Youtube
  </a><br>
</a><br>
<br><br><br><br>
<br><br>

</body>
</html>

introducir la descripción de la imagen aquí

¿Cómo hago para que una imagen ocupe toda la pantalla?

Como ven en la imagen tengo una etiqueta IMG, pero lo que necesito yo es que abarque todo la pantalla.

Estuve agregándoles las siguientes style css y sucedia esto:

mis intentos fueron estos :

  • WIDTH:100% - problema: se distorcionada y se veia muy alargada
  • display:block - se alargaba la imagen mucho y no se veia bien.
  • Agregarla en un header y alargarla pero mi problema es que necesitaba que esa imagen me mande a otra pagina, estuve viendo un codigo que se podia hacero eso, pero quiero saber si no existe otra forma de posicionar la imagen completa en la pantalla sin que distorcione cuando llege a version movil.

Mi codigo:

<!DOCTYPE html>
<html>
<head>
    <title>Rosa Susana</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Droid+Serif:400,700,700i" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" >
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/estilos.css">
    <link rel="icon" type="image/png" href="Logo para web.svg" />
  <style type="text/css">
  
  body{
    margin:0;
    padding:0;
    background:#000000;
    background-attachment:fixed;
    background-size:100% 100%;
    border:3px solid orange;
    left:10px;
    padding-top:10%;
    padding-left:3%;
/*border:1px solid #FFFF00; 

}

  #iniciar{
    text-decoration:none;
    color:black;
}
  </style>
</head>
<body>
<br><br><br><br>
<br><br><br>
<br><br>
<center>
<div class="container">
    <a href="inicio.html">
<img class="img-responsive" src="inicio.jpg" >

</div>
<br><br><br>
<br><br><br>
<center>
<a href="https://www.facebook.com/Rancho-Rosa-Susana-193044927891849/
" class="btn btn-primary">
    <span class="fa fa-facebook"></span> Facebook
  </a><br><br>
   <a style="background:red;border:none;" href="https://www.youtube.com/channel/UCB41yyo-wrldZQchu_tM3dA" class="btn btn-primary">
    <span class="fa fa-youtube"></span>  Youtube
  </a><br>
</a><br>
<br><br><br><br>
<br><br>

</body>
</html>

introducir la descripción de la imagen aquí

Origen Enlace
simon
  • 2.4k
  • 10
  • 28
  • 66

Problema de definicion de imagen de fondo de una web - Problema

tengo el siguiente problema, como ven en la imagen tengo una etiqueta IMG, okey pero lo que necesito yo es que abarque todo la pantalla y estuve agregandoles las siguientes style css y sucedia esto:

mis intentos fueron estos :

  • WIDTH:100% - problema: se distorcionada y se veia muy alargada
  • display:block - se alargaba la imagen mucho y no se veia bien.
  • Agregarla en un header y alargarla pero mi problema es que necesitaba que esa imagen me mande a otra pagina, estuve viendo un codigo que se podia hacero eso, pero quiero saber si no existe otra forma de posicionar la imagen completa en la pantalla sin que distorcione cuando llege a version movil.

Mi codigo:

<!DOCTYPE html>
<html>
<head>
    <title>Rosa Susana</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Droid+Serif:400,700,700i" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" >
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/estilos.css">
    <link rel="icon" type="image/png" href="Logo para web.svg" />
  <style type="text/css">
  
  body{
    margin:0;
    padding:0;
    background:#000000;
    background-attachment:fixed;
    background-size:100% 100%;
    border:3px solid orange;
    left:10px;
    padding-top:10%;
    padding-left:3%;
/*border:1px solid #FFFF00; 

}

  #iniciar{
    text-decoration:none;
    color:black;
}
  </style>
</head>
<body>
<br><br><br><br>
<br><br><br>
<br><br>
<center>
<div class="container">
    <a href="inicio.html">
<img class="img-responsive" src="inicio.jpg" >

</div>
<br><br><br>
<br><br><br>
<center>
<a href="https://www.facebook.com/Rancho-Rosa-Susana-193044927891849/
" class="btn btn-primary">
    <span class="fa fa-facebook"></span> Facebook
  </a><br><br>
   <a style="background:red;border:none;" href="https://www.youtube.com/channel/UCB41yyo-wrldZQchu_tM3dA" class="btn btn-primary">
    <span class="fa fa-youtube"></span>  Youtube
  </a><br>
</a><br>
<br><br><br><br>
<br><br>

</body>
</html>

introducir la descripción de la imagen aquí