Problema con el background (Novato)

[berokz]

Buenas, es mi primer post aquí, a ver si me podéis echar un cable !

Estoy trabajando en una web con prestashop y quiero poner una imagen de background, el problema está en que depende en que pantalla se vea la web el background sale descolocado o se queda pequeño. Aquí os dejo un par de fotos para que veáis mi problema :


Así se ve en la pantalla del Mac.


Así se ve en mi pc (tengo que decir que la imagen de background la he hecho a medida de mi pantalla)

y aqui el código que he usado (muy sencillo..) :

body{
background: url(fondooo.jpg); background-position: fixed;
background-attachment: fixed;
background-repeat:no-repeat;
}

Muchas gracias por vuestra ayuda.

[flashmax]

yo lo aria así pero coloca center.

Código:

background-image: url(fondooo.jpg);
background-position:center;
background-repeat:no-repeat;

[pitufoweb]

Para que funcione como deseas, necesitas separarla en 3 imágenes.

1. la "sombra" de la izquierda (...tal ves se pueda hacer esto con css3)
2. la "sombra" de la derecha (...tal ves se pueda hacer esto con css3)
3. la imagen del texto.


La primera la posicionas a la izquierda, la segunda a la derecha y la tercera en el centro.




Saludos

[berokz]

Iniciado por pitufoweb

Para que funcione como deseas, necesitas separarla en 3 imágenes.

1. la "sombra" de la izquierda (...tal ves se pueda hacer esto con css3)
2. la "sombra" de la derecha (...tal ves se pueda hacer esto con css3)
3. la imagen del texto.


La primera la posicionas a la izquierda, la segunda a la derecha y la tercera en el centro.




Saludos

Buena idea, pero si el texto lo pongo en imagen, no pasará lo mismo ? es decir, ahora los degradados se quedaran en su sitio pero el texto se descolocara.
Gracias.

[pzin]

Con CSS3 se pueden añadir varias imágenes si. Separando los parámetros por comas.

Y para hacer capturas de pantalla en MacOs, Shift+⌘+3 y en Windows el botón Impr Pant o algo así y luego pegar.

[pitufoweb]

Iniciado por berokz

Buena idea, pero si el texto lo pongo en imagen, no pasará lo mismo ? es decir, ahora los degradados se quedaran en su sitio pero el texto se descolocara.
Gracias.

Solo tendrías que centrar la imagen del texto.

background-position: top center;




Saludos

[pzin]

Otra alternativa mejor, por aquello de la compatibilidad y que no había leído cual era el problema, es separar las imágenes en dos, una para la izquierda y otra para la derecha, y luego ponerlos de fondo en HTML y en BODY.

Código CSS:

html {
    background: #fff url('/imagenes/rutaytal.png') no-repeat left;
}
body {
    background: #fff url('/imagenes/rutayta2l.png') no-repeat right;
}
 

[pitufoweb]

Iniciado por Bonez

Con CSS3 se pueden añadir varias imágenes si. Separando los parámetros por comas.

Y para hacer capturas de pantalla en MacOs, Shift+⌘+3 y en Windows el botón Impr Pant o algo así y luego pegar.

Lo del CSS3 lo decía mas bien para el gradient. Para poner las imágenes de fondo tiene varios elementos (html,body, div's etc.)


Saludos

[pitufoweb]

Iniciado por Bonez

Otra alternativa mejor, por aquello de la compatibilidad y que no había leído cual era el problema, es separar las imágenes en dos, una para la izquierda y otra para la derecha, y luego ponerlos de fondo en HTML y en BODY.

Es lo mismo que le estoy recomendando. Pero no necesita 2 imágenes, si no 3






Saludos

[pzin]

Iniciado por pitufoweb

Pero no necesita 2 imágenes, si no 3

Entonces lo mismo no es.

[pitufoweb]

Iniciado por Bonez

Entonces lo mismo no es.

Buen punto.




Saludos

[berokz]

Muchas gracias a todos !!

Ya está resuelto !