Foros del Web » Creando para Internet » Diseño web »

Div alineado con imagen de fondo

Estas en el tema de Div alineado con imagen de fondo en el foro de Diseño web en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 26/07/2013, 03:53
dbh
 
Fecha de Ingreso: diciembre-2007
Mensajes: 92
Antigüedad: 16 años, 3 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.


Etiquetas: alinear, contenidos
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Tema Cerrado




La zona horaria es GMT -6. Ahora son las 07:35.