Tengo una imagen de fondo, y lo que pretendo es que el div donde está el texto, esté siempre alineado con la imagen, a medida de que se va redimencionando la ventana.
Se que estas cosas las puedo controlar con mediaquerys, pero el problema es que yo tengo por ejemplo una mediaquery para 1920px pero si la ventana no está maximizada, el div se desplaza.
Dejo una imagen que aclarará mejor lo que quiero decir y cual es mi problema real, en la esquina inferior derecha hay un cuadro negro con la resolución aproximada.
Además tengo el siguiente código css
Código HTML:
<style type="text/css"> body, html{ 14px/21px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif } .imagenHome{ background-image: url(1-home.jpg); background-repeat: no-repeat; width: 100%; height: 835px; background-size: contain; } .texto1Home{ width: 48.1%; color: #58585A; font-weight: 700; line-height: 100%; text-align: center; float: left; border: solid 1px red; position: absolute; display: inline-block; top: 13.75%; left: 25.75% } .texto2HomeVideo{ width: 48.05%; height: 8.25%; color: #FFF; font-size: 23px; font-weight: 100; line-height: 38px; text-align: center; float: left; border: solid 1px red; position: absolute; display: inline-block; top: 35%; left: 25.65%; font-style: italic; } </style> <div class="imagenHome"> <div class="texto1Home" style="font-size: 280%;">SOMOS UNA CONSULTORÍA ESPECIALIZADA<br> EN PROPIEDAD INDUSTRIAL E INTELECTUAL,<br> INGENIERÍA DE PRODUCTO Y DISEÑO.</div> <div class="texto2HomeVideo">Si tienes un minuto, te explicamos lo que<br> podemos hacer por ti. Por favor dale al play.</div> </div>
Muchas gracias desde ya.