0

CODIGO HTML

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="PagWeb.css">
  </head>

  
<body id="hoja" data-bs-spy="scroll" data-bs-target=".navbar">
    <nav class="navbar navbar-expand-sm bg-secondary navbar-dark justify-content-center fixed-top"> <!-- bg: color de barra, navbar: color letra -->                                    
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#Home">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="">Experiencia</a>
          </li>
          <li class="nav-item">
          <a class="nav-link" href="#Educación">Educación</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#Hard & Soft Skills">Hard & Soft Skills</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#Contáctame">Contánctame</a>
            </li>
      </ul>
    </div>
  </nav>

problema a arreglar

<div class="container-fluid">
<div id="fondo1" class="position-relative" id="Home" style="height: 590px; background-image: url(img/fondo.jpg);">
  <img id="foto" class="position-absolute top-50 start-50 translate-middle rounded-circle" src="img/foto.jpg" alt="">
</div>
</div>

problema a arreglar

<div id="Educación" class="pb-3 pt-3" style="background-color: grey;">
<h1 class="text-center text-white mb-3">Educación</h1>
<p class="text-center text-white">Cursando</p>
<p class="text-center text-white">TECNICO SUP EN PROGRAMACIÓN</p>

<div class="clearfix">
  <img src="img/LogoUTN.png" class="col-md-6 img-fluid float-sm-start me-3 ms-md-3"  alt="">
  <p class="text-white">Alcances del título</p> 
  <p class="text-white"> Participar en actividades relacionadas
  a la operación y programación de computadoras en sus distintos niveles. <br> Desarrollar programas de
   computadoras aplicando
   los distintos lenguajes de programación con las diversas metodologías y técnicas. <br>
   Relevar, analizar, implementar, adaptar y controlar con eficiencia y habilidad técnica,
   la programación de los sistemas informáticos. <br>
   Creación, programación y mantenimiento de sistemas y redes de computadoras.
  </p>
</div>
</div>
</div>

Al ejecutarlo en navegador puedo ver que la imagen de fondo tiene un espacio vacío a su derecha que no se como corregir. además de que tampoco funciona el responsivo de la imagen ni agregando "img fluid" a su "class"

CODIGO CSS

#foto {
  width: 190px; height: 190px;
}

#fondo1{
  background-repeat: no-repeat;
}
2
  • esta sera la primera ves que le pido al OP que coloque una imagen captura de lo que sale mal en su navegador XD
    – user46896
    el 25 ago. 2022 a las 16:58
  • Puedes agregar un snippet (con el botón que indica <>) para crear un ejemplo mínimo verificable en la pregunta misma.
    – padaleiana
    el 25 ago. 2022 a las 18:51

2 respuestas 2

0

Hay dos cosas mezcladas aquí que puede ser la confusión y el mal funcionamiento: la imagen en modo fondo en un div con CSS, y la imagen en modo etiqueta en el html.

Pero en este caso ambos están en HTML, y no debería ser así, sino, o en CSS o en HTML.

Independientemente Bootstrap, pongo un ejemplo de ambos de cómo debe ser cada uno; para una posible solución.

#fondo1 {
  width: 590px;
  height: 590px; 
  background: #ccc url("https://placeimg.com/700/400/nature");
  background-repeat: no-repeat;
  background-size: cover
 }
<div class="container-fluid">
<div id="fondo1" class="position-relative" id="Home" >
  <img id="foto" class="position-absolute top-50 start-50 translate-middle rounded-circle" src="img/foto.jpg" alt="">
</div>
</div>

De esta forma la imagen está en el html.

Simplemente el contenedor #fondo1 es más alto que la imagen (por la imagen sin definir).

#fondo1 {
  position: relative;
  width: 590px;
  height: 590px; 
  background: #ccc
 }
<div class="container-fluid">
<div id="fondo1" class="position-relative" id="Home" >
  <img id="foto" class="position-absolute top-50 start-50 translate-middle rounded-circle" src="https://placeimg.com/700/400/nature" alt="">
</div>
</div>

3
  • hola como estas hay coloque el primer código que me mandaste de CSS y HTML pero sigue sin funcionar el responsivo y el tamaño de la imagen sigue sin ser el adecuado. Pero lo bueno es que ahora tengo todo mas ordenado el 25 ago. 2022 a las 20:35
  • según lo que entiendo el problema es el tamaño de la img con respecto al contenedor verdad? el 25 ago. 2022 a las 20:36
  • Si. Puedes hacer lo siguiente: elimina todo estilo de img y deja solamente uno, y a este dale un width: 100% y tambien, margin: 0 padding: 0 ... el 25 ago. 2022 a las 20:43
0

Ya lo resolví

CODIGO CSS:

#fondo1 {
  height: 700px; 
  background: #ccc url("https://placeimg.com/700/400/nature");
  background-repeat: no-repeat;
  background-size: cover;
 }

resulta que es mejor no usar el backgraund-image y solo poner una img en mi caso además el conteiner fluid le estaba agregando bordes indeseables a mi img de fondo con respecto a la barra grande de la derecha eso pudo haber sido porque me faltaba un background-size: cover;

CODIGO HTML:

<div id="fondo1" class="position-relative img-fluid" id="Home" style=" background-image: url(img/fondo.jpg);">
  <img id="foto" class="position-absolute top-50 start-50 translate-middle rounded-circle" src="img/foto.jpg">
</div>
1
  • No es que algo sea mejor o no; el problema es cuando se desconoce cómo usarlos correctamente. A tu id="foto" le estás agregando un ancho fijo en pixeles, por eso al usar img-fluid, que es porcentual y relativo a su contenedor, entra en conflicto. Lo mismo al agregarle position-absolute, esta clase "saca" la imagen de su contenedor, perdiendo así un ancho relativo sobre el cual tomar tamaño. el 29 ago. 2022 a las 22:11

Tu Respuesta

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

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