0

Hola tengo un problema de posicionamiento de una caja div puesta en una imagen de fondo, el problema es que no se como hacer para que en el momento de dar un resize a la pantalla el div se acomode a la posicion correcta, esta es la imagen de referencia:

Cuando hago el resize el div se mueve pero desproporcional a la posicion original:

introducir la descripción de la imagen aquí

La idea es que siempre se mantenga siempre en esta misma posicion : introducir la descripción de la imagen aquí

Este es el codigo html :

<body>
<div class="portada">
        <div class="text">
        </div>
    </div>
</body>

Codigo css:

html,body{
color:white;
  font-family:'Opens Sans',helvetica;  
  height:100%;
  width:100%;
  margin: 0px;
}


.portada{
    background: url(../images/stand.jpg) no-repeat fixed center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
    width: 100% ;
    text-align: center;

}
.text{
    position:absolute;
    top:25%;
    left:26%;
    background:red;
    height:5%;
    width:49%;
}
5
  • Hola, las imágenes no se ven, por favor chequealas
    – Erica T.
    el 17 ago. 2020 a las 0:08
  • i.stack.imgur.com/4NFPT.png imagen 1 (como debe mantenerse siempre) i.stack.imgur.com/34rQ1.png imagen 2 (cuando se hace el responsive) el 17 ago. 2020 a las 0:30
  • Diego, Bienvenido a SO en español. Si bien estas dándonos tu imagen, seria bueno que edites tu pregunta... tal como está solo te llevara a puntuaciones negativas y reportes... y caso extremos te lo cerrarán. Podes hacer un recorrido de bienvenida para saber como funciona el sitio y poder darte una vuelta por Cómo preguntar para tener algunos parámetros para editar tu pregunta... mucha suerte el 17 ago. 2020 a las 0:33
  • Exactamente a que te refieres con desproporcional?? Porque viendo la segunda imagen está claro que al reducir el ancho de la pantalla la imagen se está adaptando a su 100% de ancho. Y ese es el comportamiento habitual para no deformar la imagen. Corrígeme se me equivoco, pero quieres que la imagen se estire a lo alto y pierda la forma y proporción de la misma?? el 17 ago. 2020 a las 0:45
  • Victor muchas gracias por tu ayuda lo que busco es que siempre el div de color rojo se mantenga como esta en la segunda imagen al aumentar el tamaño de la pantalla el div se baja asumo que es por las posiciones porcentuales pero no se que propiedad utilizar muchas gracias !!! el 17 ago. 2020 a las 0:49

1 respuesta 1

1

No se si es preciso e importante para tí que tu "background-size: cover;" tenga que ser cover, ya que eso te dificulta que la imagen mantenga proporciones en base al ancho de la página coincidiendo con el resto de elementos, puedes poner el background en 100%, aunque yo lo haría parecido a esto:

HTML

<div class="portada">
    <img src="stand.jpg" alt="">
    <div class="text">
    </div>
</div>

CSS:

.portada{
     width: 100%; position: relative;

}
.portada img {
    width: 100%;
}
.text{
    position:absolute;
    top:25%;
    left:26%;
    background:red;
    height:5%;
    width:49%;
}

De esta forma lograrías que el div se vaya ajustando a la par de la imagen.

Te toca ajustar el tamaño del div a la altura indicada, ya que no proporcionaste la imagen completa de stand.jpg, juega con el top, left, y width del contenedor ".text"

Si la imagen está centrada, centra el div con:

.text {
    left: 0;
    right: 0;
    margin: auto;
}

Espero haberte ayudado.

2
  • Muchisimas gracias eso era lo que necesitaba !! eres un crack el 17 ago. 2020 a las 2:34
  • de nada @Diego Linares, recuerda marcar si la respuesta te fue útil
    – Elboy
    el 17 ago. 2020 a las 2:35

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.