Ver Mensaje Individual
  #1 (permalink)  
Antiguo 26/07/2013, 03:53
dbh
 
Fecha de Ingreso: diciembre-2007
Mensajes: 92
Antigüedad: 16 años, 4 meses
Puntos: 4
Pregunta Div alineado con imagen de fondo

Hola a todos, tengo un problemilla desde hace unos días que no he podido solucionar.

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&Iacute;A ESPECIALIZADA<br>
		EN PROPIEDAD INDUSTRIAL E INTELECTUAL,<br>
		INGENIER&Iacute;A DE PRODUCTO Y DISE&Ntilde;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.