Espacio en blanco a la derecha -> scroll horizontal... porque?

[jakijem]

Hola,

siguiendo con mis problemas: teniendo este codigo para una pagina de 1366:

HTML:

Código:

 <img src="img/fondo_2560x1200.jpg" class="fondo"/>

El resto de la página no contiene nada que se salga de las medidas

CSS:

Código:

@media only screen and (min-width: 1281px) and (max-width: 1366px) {

.fondo{
		position: absolute;
		right: 0%;
		top: 0%;
		max-width: 100%;
		z-index: 0;
	}
...
}

me deja una zona a la derecha en blanco, haciendo que aparezca el scroll horizontal,

El fondo lo necesito que se adapte al tamaño máximo de la pantalla, por eso es una imagen de 2560x1200, pero el trozo que queda a la derecha en blanco no es apenas de 200px...

Que estoy haciendo mal? (supongo que varias cosas)

[AngelKrak]

prueba a agregar la imagen como Background en vez de imagen directa ;)

Código CSS:

@media only screen and (min-width: 1281px) and (max-width: 1366px) {
 
.fondo{
        background: url("img/fondo_2560x1200.jpg");
        position: absolute;
        right: 0%;
        top: 0%;
        max-width: 100%;
        z-index: 0;
    }
...
}
 

[fede5426]

Yo quisiera ver el código en funcionamiento antes de decirte que lo cambies..

[jakijem]

Iniciado por AngelKrak

prueba a agregar la imagen como Background en vez de imagen directa ;)

Código CSS:

@media only screen and (min-width: 1281px) and (max-width: 1366px) {
 
.fondo{
        background: url("img/fondo_2560x1200.jpg");
        position: absolute;
        right: 0%;
        top: 0%;
        max-width: 100%;
        z-index: 0;
    }
...
}
 

Es que en ese caso, no puedo hacer que sea un mismo fondo para todas las versiones, es decir, que sea una imagen responsive...

[jakijem]

es que además, le pongo:

Código:

body {
   overflow-x: hidden;
}

y no funciona, sigue apareciendo el scroll horizontal

[jakijem]

vale, acabo de darme cuenta de porqué pasaba,

en el head del html tenia:

Código:

 <!-- laptop -->
   <link rel="stylesheet" type="text/css" href="css/08_portada_laptop.css" media="only screen and (min-width : 1281px) and (max-width : 1366px)">

  <!-- laptop grande -->
  <link rel="stylesheet" type="text/css" href="css/09_portada_laptop_g.css" media="only screen and (min-width : 1367px) and (max-width : 1440px)">

y en cada uno de esas dos hojas de estilo:

Código:

@media only screen and (min-width: 1281px) and (max-width: 1366px) {
...}

Código:

@media only screen and (min-width: 1367px) and (max-width: 1440px) {
...}

pero lo que sucede es que en 1366 me carga la segunda hoja, en lugar de la primera. ¿porqué?