[SOLUCIONADO] Error imagen fondo (?)

kamino · #1 (**permalink**) 10/03/2013, 12:38

Buenas, estoy haciendo una web y tengo un problema. Al mover el ratón hacia la izquierda se me desplaza toda la web. Creo que es el la imagen de fondo el css. Aqui os dejo una captura de lo que pasa:

Este es el codigo del css del fondo:

Código:

#all>img.bg {
	position: absolute;
	overflow: hidden;
	background-position: center center;
	right: 0;
	min-width: 100%;
	z-index: -1;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	height: 100%;
}

¿Porque puede ser? Gracias y saludos

pzin · #2 (**permalink**) 10/03/2013, 13:13

¿Una imagen imitando una imagen de fondo? ¿Qué pasó con background-image?

Si pones el código HTML relativo mejor, porque así tal cual no dice mucho.

kamino · #3 (**permalink**) 10/03/2013, 13:21

Gracias por responder. No llevo mucho en esto por si ves algo raro...

Código:

<body>
	<div id="all">
		<img class="bg" src="resources/images/bg.jpg">
		<div id="logo">
			<img class="logo" src="resources/images/logo.png">
		</div>
		<div id="login">		
			<form action="actions.php?a=login" method="POST" id="login-form">
				<table>	
					<tr>
						<td><input type="text" id="username" placeholder="Correo electrónico"/></td>
					</tr>
					<tr>
						<td><input type="password" id="pass" placeholder="Contraseña"/></td>
					</tr>
					<tr>
						<td><input type="submit" name="Submit" value="Entrar"/></td>
					</tr>
				</table>
			</form>
		</div>
	</div>
</body>

El fondo lo he puesto asi ya que lo vi varias web que lo tenían por este metodo.
Salu2

pzin · #4 (**permalink**) 10/03/2013, 13:31

Mete la imagen de fondo como imagen de fondo en body o en div#all, no te metas en cosas extrañas.

kamino · #5 (**permalink**) 10/03/2013, 13:44

como lo tendria que poner background: url___ o background-image?

pzin · #6 (**permalink**) 10/03/2013, 14:18

Puedes usar background o background-image, como prefieras.

kamino · #7 (**permalink**) 10/03/2013, 14:21

Muchas gracias por todo probare haber :D

kamino · #8 (**permalink**) 10/03/2013, 14:33

Lo he probado y me sigue pasando. Lo he puesto tanto en body como en #all. Te dejo aqui el codigo css completo haber :/

Código:

html, body {
	height: 95%; 
	margin: 0 auto;
	padding: 0px;
	width: 100%;
}

body {
	overflow-x: hidden;
	font-family: "Arial", "Verdana";
	background-color: #00B8F5;
}

input[type="text"], input[type="password"] {
	width: 160%;
	height: 35px;
	positon: relative;
	margin-top: 7px;
	font-size: 16px;
	font-weight: 300;
	color: #221919;
	outline: none;
	border: 1px solid rgba(0, 0, 0, .49);
	padding-left: 12px;
	border-radius: 6px;
	background-image: -webkit-linear-gradient(bottom, #FFFFFF 0%, #F2F2F2 100%);
	background-image: -moz-linear-gradient(bottom, #FFFFFF 0%, #F2F2F2 100%);
	background-image: -o-linear-gradient(bottom, #FFFFFF 0%, #F2F2F2 100%);
	background-image: -ms-linear-gradient(bottom, #FFFFFF 0%, #F2F2F2 100%);
	background-image: linear-gradient(bottom, #FFFFFF 0%, #F2F2F2 100%);
	-webkit-box-shadow: inset 0px 2px 0px #d9d9d9;
	box-shadow: inset 0px 2px 0px #d9d9d9;
}

input[type="submit"] {
	width: 40%;
	height: 35px;
	position: relative;
	margin-top: 7px;
	font-size: 16px;
	color: #4d4d4d;
	outline: none;
	border: 1px solid #c3c3c3;
	border-radius: 6px;
	background-color: #f0eded;
	background: -webkit-linear-gradient(top, #fdfcfc, #fbf9f9 50%, #f7f5f6 50%, #f2f0f0);
	background: -o-linear-gradient(top, #fdfcfc, #fbf9f9 50%, #f7f5f6 50%, #f2f0f0);
	background: -moz-linear-gradient(top, #fdfcfc, #fbf9f9 50%, #f7f5f6 50%, #f2f0f0);
	background: linear-gradient(top, #fdfcfc, #fbf9f9 50%, #f7f5f6 50%, #f2f0f0);
	cursor: pointer;
}

#all {
	background: url("direccion url de la imagen");
	background-position: 100% 100%;
}

#login {
	position: relative;
	margin: auto;
	width: 20%;
	top: 30%;
}

#logo>img.logo {
	width: 30%;
}

#logo {
	position: relative;
	left: 37%;
}

.button {
	width: 43%;
	height: 35px;
	color: #fff;
	font-size: 16px;
	border: solid 1px #0076a3;
	background: #0095cd;
	background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
	background: -moz-linear-gradient(top, #00adee, #0078a5);
	background:-o-linear-gradient(top, #00adee, #0078a5);
	background: linear-gradient(top, #00adee, #0078a5);
	display: inline-block;
	zoom: 1;
	outline: none;
	cursor: pointer;
	text-align: center;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover{
	background: #0086b8;
}

#actionbuttons {
	position: relative;
	margin: auto;
	width: 55%;
	left: 17.9%;
	margin-top: 1%;
}

pzin · #9 (**permalink**) 10/03/2013, 14:37

Yo lo pruebo tal cual lo tienes y veo todo centrado.

kamino · #10 (**permalink**) 10/03/2013, 14:39

Te mando un mp con la web para que lo compruebes esque se va todo para el lado, es decir, puedes con el raton mover toda la web a la izquierda

pzin · #11 (**permalink**) 10/03/2013, 14:59

¿Y en qué navegador te ocurre?

Porque he probado la URL en Chrome, Firefox y Safari y se ve bien, no se corre nada hacia la izquierda.

kamino · #12 (**permalink**) 10/03/2013, 15:09

Safari y Chrome Mac :S Mira la pagina al principio me aparece asin:

La muevo hacia la izquierda:

kamino · #13 (**permalink**) 10/03/2013, 15:23

Con esto

Código:

#all {
	overflow: hidden;
	background-position: center center;
	width: 100%;
	background: url("http://stalkto.com/resources/images/bg.jpg") no-repeat;
}

He conseguido hacer que no se mueva. Me podrías ayudar ahora a poner el fondo que quedará asi:

Ahora mismo se ve de esta forma:

Gracias por todo

pzin · #14 (**permalink**) 10/03/2013, 15:34

Pues qué raro, yo probaba con Chrome y Safari, también en Mac, y no me pasaba eso.

Para que se adapte a toda la pantalla, tienes que darle a html y body una altura de 100%, y al elemento que contiene la imagen de fondo lo mismo.

Adicionalmente yo añadiría esto a la imagen de fondo:

Código CSS:

Ver originalbackground-size: cover

Así la imagen de fondo se expande —grande o pequeño— sin deformarse nunca.

kamino · #15 (**permalink**) 10/03/2013, 15:41

Código:

html, body {
	height: 100%; 
	margin: 0 auto;
	padding: 0px;
	width: 100%;
}

#all {
	overflow: hidden;
	background-position: center center;
	width: 100%;
	background: url("http://stalkto.com/resources/images/bg.jpg") no-repeat;
	background-size: cover;
}

He añadido eso pero la imagen sigue viéndose igual cortándose :/
Es eso a lo que te referías?

pzin · #16 (**permalink**) 10/03/2013, 15:45

Si, eso. Sólo te falta añadir la altura a #all. Por eso se te corta, porque #all no está al 100%.

Código CSS:

Ver original#all {
  overflow: hidden;
  width: 100%;
  height: 100%;
  background: url("http://stalkto.com/resources/images/bg.jpg") no-repeat;
  background-size: cover;
}

El background-position lo puedes quitar, porque no te hace falta.

kamino · #17 (**permalink**) 10/03/2013, 16:01

Gracias ya sale completo pero me gustaría que se viera más camino como en la imagen de antes
Ahora mismo se ve asi:

pzin · #18 (**permalink**) 10/03/2013, 16:12

Entonces vuelve a ponerle el background-position y lo ajustas abajo, o como necesites.

Código CSS:

Ver originalbackground-position: bottom

kamino · #19 (**permalink**) 10/03/2013, 16:14

Vale muchas gracias por todo. Marco el tema como resuelto :)