1

Estoy utilizando una imagen de fondo ubicada en el CSS en la cual posiciono arriba de la misma dos líneas de texto y un botón. Mi intención era que se adaptara tanto el texto y la imagen a un diseño responsive teniendo el texto e imagen siempre anclados.

Me encuentro con el problema de que al querer testear si cumplían estos elementos con el diseño responsive los dos a la vez resulta que la imagen se separa del texto y no quedan anclados como tenía pensado.

Quisiera que el texto, botón e imagen estén siempre en esa posición y sean responsive sin que se separen del image background.

Quedo atento a sus respuestas para encontrar mi error.

Testear el código en pantalla completa achicando acortando las dimensiones para comprender mejor mi error e inconveniente

.main .row2 {
  background: url(https://images.squarespace-cdn.com/content/v1/514f6f4ce4b023ca29000709/1619545371720-NGX1L9ENSQ4DNUH2XRVY/street-scrambler-family-timeline-urban-scrambler-handling-1920x780.jpeg) no-repeat;
  background-size: cover;
  background-position: center center;
  /* margin-top: -1%; */
  margin-right: 0%;
  margin-left: 0%;
  background-size: 100%;
  min-height: 80vh;
  /* margin-bottom: -5%; */
  border-bottom: #EEE7CE 1px solid;
}

.main .row2 .content h3 {
  padding-top: 7%;
  font-family: 'Roboto', sans-serif;
  color: rgb(251, 255, 0);
  margin-left: 15%;
  font-size: 2.8rem;
  font-weight: 500;
  font-style: xx-large;
  word-spacing: 5px;
  letter-spacing: 0px;
}

.main .row2 .content h2 {
  margin-top: -1%;
  font-family: 'Roboto', sans-serif;
  color: rgb(196, 218, 0);
  margin-left: 15%;
  font-size: 5.5rem;
  font-weight: 600;
}

.main .row2 .content p {
  margin-top: 3%;
  color: #1e1e1f;
  font-size: 1.5rem;
  margin-left: 0.5%;
  line-height: 2;
  padding: 1rem 0;
  margin-right: 25%;

}

.main .btn4 {
  position: sticky;
  padding: 0.4%;
  left: 32.5%;
  top: 1890%;
  width: 19%;
  text-align: center;
  font-size: 1.15rem;
  text-shadow: none;
  color: #FFC728;
  background: #000000;
  cursor: pointer;
  display: block;
  margin-bottom: -3%;
  border-radius: .7rem;
  border: 1.5px solid #EEE7CE;
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

.main .btn4 i {
  font-weight: 900;
  font-size: 120%;
  margin-right: 3%;
}

.main .btn4:hover {
  background: rgb(0, 0, 0);
  color: #000000;
  text-shadow: none;
  font-size: 1.3rem;
}

.main .btn4:hover:before {
  bottom: 0%;
  top: auto;
  height: 100%;
}

.main .btn4:before {
  border-radius: .6rem;
  display: block;
  position: absolute;
  left: 0px;
  top: 0px;
  height: 0px;
  width: 100%;
  z-index: -1;
  content: '';
  color: #000000;
  background: #FFC728;
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

/* BARRA LATERAL COLOCADO PARA EJEMPLIFICAR */
/* NO PRESTARLE IMPORTANCIA */

.navbar .header-2 {
  grid-area: navbar;
  position: fixed;
  top: 0px;
  left: 0px;
  bottom: 0px;
  width: 73px;
  border-radius: 0 20px 20px 0;
  box-sizing: initial;
  border-left: 5px solid #1d2f33;
  border-right: 4px solid #EEE7CE;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  background: #1d2f33;
  transition: 0.5s;
  overflow-x: hidden;
  z-index: 2300;
}

.navbar .header-2.active {
  width: 230px;
}

.navbar .header-2 ul {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 99.9%;
  padding-left: 5px;
  padding-top: 79px;
}

.navbar .header-2 ul li {
  position: relative;
  display: block;
  width: 100%;
  border-top-left-radius: 14px;
  border-bottom-left-radius: 14px;
  transition: 0s;
  margin-bottom: 5%;
}

.navbar .header-2 ul li.active {
  background: #EEE7CE;
  transition: 0s;
  height: 55px;
}

.navbar .header-2 ul li b:nth-child(1) {
  position: absolute;
  top: -12px;
  height: 12px;
  width: 100%;
  background: #EEE7CE;
  display: none;
}

.navbar .header-2 ul li b:nth-child(1)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-bottom-right-radius: 12px;
  background: #145D56;
}

.navbar .header-2 ul li b:nth-child(2) {
  position: absolute;
  bottom: -12px;
  height: 12px;
  width: 100%;
  background: #EEE7CE;
  display: none;
}

.navbar .header-2 ul li b:nth-child(2)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-top-right-radius: 12px;
  background: #145D56;
}

.navbar .header-2 ul li.active b:nth-child(1),
.header-2 ul li.active b:nth-child(2) {
  display: block;
}

.navbar .header-2 ul li a {
  position: relative;
  display: block;
  width: 190%;
  display: flex;
  text-decoration: none;
  color: #EEE7CE;
}

.navbar .header-2 ul li.active a {
  color: black;
  transition: 0s;
}

.navbar .header-2 ul li a .icon {
  position: relative;
  display: block;
  min-width: 60px;
  height: 55px;
  line-height: 62px;
  text-align: center;
  font-size: 1.5em;
}

.navbar .header-2 ul li a .title {
  position: relative;
  display: block;
  padding-left: 7px;
  height: 60px;
  line-height: 65px;
  white-space: normal;
  font-size: .95em;
}

.navbar .toggle {
  position: fixed;
  top: 18px;
  left: 24px;
  float: left;
  transition: 0.5s;
  z-index: 2300;
  cursor: pointer;
}

.nameUser {
  color: white;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  font-size: 22px;
  display: none;
  position: absolute;
  top: 22px;
  left: 32px;
}
<!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">
    <!-- ===== Iconscout CSS ===== -->
    <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.datatables.net/v/bs4-4.1.1/dt-1.10.18/datatables.min.css">
    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous">
    </script>
    <link rel="stylesheet" href="styleImageTextResponsive.css">
  </head>
  <body>
    <nav class="navbar">
      <div class="header-2">
      </div>
    </nav>
    <article class="main">
      <div class="row2">
        <div class="content">
          <h3>TESTEANDO TEXTO RESPONSIVE</h3>
          <h2>Imagen de fondo</h>
          <a href="#" id="login-btn" class="btn4"><i class="uil uil-images"></i>BUSCAR IMAGEN</a>
        </div>
      </div>
    </article>
  </body>
</html>

0

1 respuesta 1

1

Si te das cuenta, al achicar la pantalla, la imagen genera un espacio arriba y abajo, esto es debido a que lo estás posicionando siempre al centro cuando queremos achicar la imagen:

background-position: center center;

Entonces, comentamos esta línea y así tu imagen se posicionará arriba, sin generar espacios en ambos lados. Ahora el siguiente problema sería que tus textos se desbordan de tu imagen:

introducir la descripción de la imagen aquí

Observamos que tu contenedor es hasta esa línea color naranja, y tu imagen solo ocupa el ancho al 100% de la pantalla, haciendo que su altura se adapte a ese ancho (es por eso que tiene ese espacio blanco debajo), entonces hagamos que tu imagen ocupe siempre toda la altura de tu contenedor, quitando la siguiente propiedad:

background-size: 100%;

Y reduzcamos un poco los textos para que no se vean muy gigantes en pantallas chicas, utilizando la regla @media de CSS (esto lo puedes personalizar a tu gusto):

@media (max-width: 765px) {
  .main .row2 .content h3,
  .main .row2 .content h2 {
    font-size: 2rem;
  }
  
  .main .btn4 {
    font-size: 0.8rem !important;
  }
}

Y obtienes un mejor resultado:

introducir la descripción de la imagen aquí

Código completo:

.main .row2 {
  background: url(https://images.squarespace-cdn.com/content/v1/514f6f4ce4b023ca29000709/1619545371720-NGX1L9ENSQ4DNUH2XRVY/street-scrambler-family-timeline-urban-scrambler-handling-1920x780.jpeg) no-repeat;
  background-size: cover;
  /* background-position: center center; */
  /* margin-top: -1%; */
  margin-right: 0%;
  margin-left: 0%;
  /* background-size: 100%; */
  /* margin-bottom: -5%; */
  border-bottom: #EEE7CE 3px solid;
}

.main .row2 .content h3 {
  font-family: 'Roboto', sans-serif;
  color: rgb(251, 255, 0);
  font-size: 2.8rem;
  font-weight: 500;
  font-style: xx-large;
  word-spacing: 5px;
  letter-spacing: 0px;
  margin-left: 90px;
  padding: 20px;
}

.main .row2 .content h2 {
  font-family: 'Roboto', sans-serif;
  color: rgb(196, 218, 0);
  font-size: 5.5rem;
  font-weight: 600;
  margin-left: 90px;
  padding: 20px;
}

@media (max-width: 765px) {
  .main .row2 .content h3,
  .main .row2 .content h2 {
    font-size: 2rem;
  }
  
  .main .btn4 {
    font-size: 0.8rem !important;
  }
}

.main .row2 .content p {
  margin-top: 3%;
  color: #1e1e1f;
  font-size: 1.5rem;
  margin-left: 0.5%;
  line-height: 2;
  padding: 1rem 0;
  margin-right: 25%;

}

.main .btn4 {
  position: sticky;
  margin-top: 20px;
  padding: 5px;
  left: 32.5%;
  top: 1890%;
  width: max-content;
  text-align: center;
  font-size: 1.15rem;
  text-shadow: none;
  color: #FFC728;
  background: #000000;
  cursor: pointer;
  display: block;
  margin-bottom: -3%;
  border-radius: .7rem;
  border: 1.5px solid #EEE7CE;
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

.main .btn4 i {
  font-weight: 900;
  font-size: 120%;
  margin-right: 3%;
}

.main .btn4:hover {
  background: rgb(0, 0, 0);
  color: #000000;
  text-shadow: none;
  font-size: 1.3rem;
}

.main .btn4:hover:before {
  bottom: 0%;
  top: auto;
  height: 100%;
}

.main .btn4:before {
  border-radius: .6rem;
  display: block;
  position: absolute;
  left: 0px;
  top: 0px;
  height: 0px;
  width: 100%;
  z-index: -1;
  content: '';
  color: #000000;
  background: #FFC728;
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

/* BARRA LATERAL COLOCADO PARA EJEMPLIFICAR */
/* NO PRESTARLE IMPORTANCIA */

.navbar .header-2 {
  grid-area: navbar;
  position: fixed;
  top: 0px;
  left: 0px;
  bottom: 0px;
  width: 73px;
  border-radius: 0 20px 20px 0;
  box-sizing: initial;
  border-left: 5px solid #1d2f33;
  border-right: 4px solid #EEE7CE;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  background: #1d2f33;
  transition: 0.5s;
  overflow-x: hidden;
  z-index: 2300;
}

.navbar .header-2.active {
  width: 230px;
}

.navbar .header-2 ul {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 99.9%;
  padding-left: 5px;
  padding-top: 79px;
}

.navbar .header-2 ul li {
  position: relative;
  display: block;
  width: 100%;
  border-top-left-radius: 14px;
  border-bottom-left-radius: 14px;
  transition: 0s;
  margin-bottom: 5%;
}

.navbar .header-2 ul li.active {
  background: #EEE7CE;
  transition: 0s;
  height: 55px;
}

.navbar .header-2 ul li b:nth-child(1) {
  position: absolute;
  top: -12px;
  height: 12px;
  width: 100%;
  background: #EEE7CE;
  display: none;
}

.navbar .header-2 ul li b:nth-child(1)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-bottom-right-radius: 12px;
  background: #145D56;
}

.navbar .header-2 ul li b:nth-child(2) {
  position: absolute;
  bottom: -12px;
  height: 12px;
  width: 100%;
  background: #EEE7CE;
  display: none;
}

.navbar .header-2 ul li b:nth-child(2)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-top-right-radius: 12px;
  background: #145D56;
}

.navbar .header-2 ul li.active b:nth-child(1),
.header-2 ul li.active b:nth-child(2) {
  display: block;
}

.navbar .header-2 ul li a {
  position: relative;
  display: block;
  width: 190%;
  display: flex;
  text-decoration: none;
  color: #EEE7CE;
}

.navbar .header-2 ul li.active a {
  color: black;
  transition: 0s;
}

.navbar .header-2 ul li a .icon {
  position: relative;
  display: block;
  min-width: 60px;
  height: 55px;
  line-height: 62px;
  text-align: center;
  font-size: 1.5em;
}

.navbar .header-2 ul li a .title {
  position: relative;
  display: block;
  padding-left: 7px;
  height: 60px;
  line-height: 65px;
  white-space: normal;
  font-size: .95em;
}

.navbar .toggle {
  position: fixed;
  top: 18px;
  left: 24px;
  float: left;
  transition: 0.5s;
  z-index: 2300;
  cursor: pointer;
}

.nameUser {
  color: white;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  font-size: 22px;
  display: none;
  position: absolute;
  top: 22px;
  left: 32px;
}
<!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">
    <!-- ===== Iconscout CSS ===== -->
    <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.datatables.net/v/bs4-4.1.1/dt-1.10.18/datatables.min.css">
    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous">
    </script>
    <link rel="stylesheet" href="styleImageTextResponsive.css">
  </head>
  <body>
    <nav class="navbar">
      <div class="header-2">
      </div>
    </nav>
    <article class="main">
      <div class="row2">
        <div class="content">
          <h3>TESTEANDO TEXTO RESPONSIVE</h3>
          <h2>Imagen de fondo</h>
          <a href="#" id="login-btn" class="btn4"><i class="uil uil-images"></i>BUSCAR IMAGEN</a>
        </div>
      </div>
    </article>
  </body>
</html>

1
  • 1
    Muy buena la explicación. Saludos compañero y gracias por tú tiempo!
    – Lucas
    Commented el 7 mar. 2023 a las 4:14

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.