background scroll

[LostDrag]

Buenas!!

Estoy con una pagina web en la que necesito una imagen de fondo que se mueva con el resto de la web (scroll). Esto lo tengo ya conseguido, mi problema viene cuando tengo que controlas el width de la imagen de fondo, que quiero que sea siempre 100% (en caso contrario, tendria que tener varias imagenes o cambiar el tamaño de la imagen dependiendo de la resolucion, la qual podria controlar desde javascript, pero estoy seguro que existe alguna solucion menos engorrosa).
He conseguido poner una imagen de fondo al 100% pero no me funciona el scroll, por otra parte he conseguido que la imagen haga scroll pero entonces no puedo controlar la anchura...

Ayuda porfavor!!! Graciaas ;)

[rodrigo791]

Lo del fondo eso que decís para que se mueva con el scroll es con "bgproperties=fixed".
Si ya lo tenes echo eso no es problema entonces
Mostranos el codigo de tu web para ver cual pueda ser el error.

[iwexcoder]

Mira lo que generalmente hago es crear una imagen de fondo para 4 o 5 resoluciones....luego con Javascritp detectas la resolucion y carga la imagen o archivo css que corresponda...digamo que mas facil que estoy no se me ocurre

ejemplo

<script language="javascript">
if ( screen.width >1024 )
{
document.write('<link rel="stylesheet" type="text/css" href="estilos/fondo1600.css" />');
}
else if ( screen.width == 1024 )
{
document.write('<link rel="stylesheet" type="text/css" href="estilos/fondo1024.css" />');
}
else if ( screen.width < 1024)
{
document.write('<link rel="stylesheet" type="text/css" href="estilos/fondo800.css" />');
}



</script>

Aca el javascrpt va detecta la resolucion de pantalla, y segun cual sea va cargando una hoja de estilo diferente...en cada hoja de estilo uso un background especifico para cada resolucion.

Espero haberte ayudado

Un saludo

[LostDrag]

He intentado de un par de maneras:

1: Con un div principal con la imagen de fondo (es el mas correcto, ya que funciona perfectamente en todos los navegadores). Aqui hay scroll de la imagen, pero nose como puedo controlar el tamaño...

HTML
<div class="principal"></div>

CSS
.principal {
padding:40px 40px 40px 300px;
background: url(images/fondo.jpg) no-repeat 20px 20px fixed;
}



2: Poniendo la imagen de fondo en el body (este sistema me daba problemas en IE7, la opcion background-attachement parece que no le gusta).

CSS:

BODY {
background-image: url(images/fondo.jpg);
background-attachment: scroll;
background-repeat: no-repeat;
}


Los dos sistemas son correctos para hacer que la imagen baje junto con el texto, funcionan bien, pero no consigo hacer que la imagen siempre ocupe todo el ancho de la pantalla...

La pagina web es: www.piercingmagic.com

Podeis fijaros como queda, ahora mismo solo consigo que la imagen se muestre con el tamaño que tiene originalmente, cosa que me supone un problema ya que dependiendo de la resolucion del usuario, la imagen de fondo no encaja con la web... Alguien sabe como hacer que la imagen ocupe siempre todo el ancho??

Gracias una vez mas ;)

[LostDrag]

Iniciado por iwexcoder

Mira lo que generalmente hago es crear una imagen de fondo para 4 o 5 resoluciones....luego con Javascritp detectas la resolucion y carga la imagen o archivo css que corresponda...digamo que mas facil que estoy no se me ocurre

ejemplo

<script language="javascript">
if ( screen.width >1024 )
{
document.write('<link rel="stylesheet" type="text/css" href="estilos/fondo1600.css" />');
}
else if ( screen.width == 1024 )
{
document.write('<link rel="stylesheet" type="text/css" href="estilos/fondo1024.css" />');
}
else if ( screen.width < 1024)
{
document.write('<link rel="stylesheet" type="text/css" href="estilos/fondo800.css" />');
}



</script>

Aca el javascrpt va detecta la resolucion de pantalla, y segun cual sea va cargando una hoja de estilo diferente...en cada hoja de estilo uso un background especifico para cada resolucion.

Espero haberte ayudado

Un saludo

Muchas gracias, ya habia pensado en esta solucion. Pero estoy convencido de que hay algun sistema mas practico, con el que no haya que tener varias imagenes dependiendo de la resolución...
He conseguido poner una imagen de fondo que siempre ocupa todo el ancho, es tan sencillo como crear un DIV principal, i dentro de este colocar una IMG (con el TAG img, nada de background). Despues desde el CSS le asignas width: 100%; y listo!! El problema de este sistema es que no hay scroll de la imagen...

Alguna idea mas? Graciaas :)

[rodrigo791]

Pero amigo lo que acabas de hacer no te va a servir, no estas poniendo una imagen de fondo, sino que una imagen como un bloque, osa no vas a poder poner cosas en ella!
Tiene que ser un background para asi que sea un fondo de el DIV, lo que estas haciendo ahora no es aplicar un fondo sino introducir una imagen que ocupe el 100% de ancho de la pantalla, entendes?

[LostDrag]

Pero se puede conseguir, en caso de no necesitar scroll, que la imagen ocupe todo el ancho tal y como he explicado. Aqui tienes más información. Realmente, te ahorras el javascript...

Explicacion: http://css-tricks.com/how-to-resizeable-background-image/
Ejemplo: http://css-tricks.com/examples/ImageToBackgroundImage/

Además, solo lo he probado, ya que en mi caso no me sirve, aculmente estoy usando el codigo que he puesto antes, pero no me convence...

Alguna solucion mas??