¿Fondo ajustable sin cambiar tamaño de imagen?

[albertcito]

Hola chicos de foros del web :)

Les comento que tengo un problema, he intentado solucionar el problema para ver si se puede hacer lo que deseo. Sucede que en está dirección: http://pueb.inspiracion.cl/ tengo un sitio web ^^ y arriba tiene una imagen de fondo, el código html es el siguiente:

Código HTML:

<div id="slideshow">
	<ul><li>
		<img src="img/header.jpg" width="1280" height="207" />
	</li></ul>
</div> 

Luego tengo el código CSS

Código:

#slideshow {		
	position: absolute;
	margin: 0 -157px;
	padding: 0 157px;	
	z-index:0;
}
	#slideshow li {
		position: absolute;
		left: 0;		
		top: 0;
		width: 980px;
	}

Entonces sucede que cuando visualizo el sitio web, queda el scroll horizontal visible, y cuando achico la ventana o la resolución funciona más o menos bien, el problema es que igual se ve el scroll horizontal porque el problema real es que al lado izquierdo se esconde un poco la imagen (eso está bien) pero el lado derecho de la imagen no se esconde.

Alguien sabe si como puedo lograr el efecto sin cambiar el tamaño de la imagen sino que la imagen se escondan las partes izquierdas y derechas y solo quede el centro dependiendo la resolución de la pantalla o el tamaño que deje el navegador.

Por su ayuda miles de gracias!!! bye ^_^

[Calizman]

Hola!

Vamos a ver si entiendo bien... Estas utilizando posiciones absoulutas y una lista desordenada para crear un encabezado de pagina? No, mira, las cosas no funcionan asi. Te recomiendo que antes de solucionar ese problema, aprendas un poquito de Maquetacion Web en CSS. Con eso tendrass para divertirte un rato, y de paso arreglas tu problema con el encabezado.

Que te parece?

Hasta Luego!

[albertcito]

oajoajaoja!!!! Calizman! gracias por el consejo, pero si se bastante CSS :) alomejor no te cargo bien la pagina! ya que viste desordenada la lista!

El asunto es que dejar por medio de una position:absolute una imagen de fondo, pero al momento de que la resolución de pantalla baje entonces a 1024x768 por ejemplo que la imagen no cambie de tamaño, pero sí que se ajuste la ventana y el scroll horizontal justo al ancho de la pagina o de la resolución.

Creo que se puede hacer pero no estoy seguro, ya que lo he visto. Lo podría hacer con javascript, pero prefiero ver si alguien sabe como hacerlo solo con CSS.

Saludos y ojala alguien me pueda ayudar. Gracias.

[kseso?]

Iniciado por albertcito

oajoajaoja!!!! Calizman! gracias por el consejo, pero si se bastante CSS :) a lo mejor no te cargo bien la pagina! ya que viste desordenada la lista!<-- Épico. De lo mejorcito que he escuchado en mucho tiempo.

El asunto es que dejar por medio de una position:absolute una imagen de fondo, pero al momento de que la resolución de pantalla baje entonces a 1024x768 por ejemplo que la imagen no cambie de tamaño, pero sí que se ajuste la ventana y el scroll horizontal justo al ancho de la pagina o de la resolución.

Creo que se puede hacer pero no estoy seguro, ya que lo he visto. Lo podría hacer con javascript, pero prefiero ver si alguien sabe como hacerlo solo con CSS.<- Sí, sólo necesita definir tamaños en % para que la imagen se muestre siempre completa. Si quiere que se vea a igual tamaño con pérdida de los laterales, vía background posicionado.

Saludos y ojala alguien me pueda ayudar. Gracias. <-- la mejor ayuda que pude obtener a medio y largo plazo ya se la ofreció Calizman. No hay otra. Olvide su creencia de lo mucho bastaste que sabe de css y aplíquese: www.librosweb.es

[albertcito]

Es que al parecer no entienden lo que deseo hacer ya que me dices ésto: "Sí, sólo necesita definir tamaños en % para que la imagen se muestre siempre completa. Si quiere que se vea a igual tamaño con pérdida de los laterales, vía background posicionado."

Le puse con lista ya que la idea es poder ir cambiando a través de fadeIn fadeOut la imagen de fondo tipo http://cifan.inspiracion.cl/ lo malo es que en el sitio (http://cifan.inspiracion.cl/) igual tengo el mismo problema, aunque la imagen es más pequeña!

El problema es que cuando la ventana se achica por ejemplo a 1024px la ventana no se ajusta al ancho sino que aparece el scroll abajo; por ejemplo a forosdelweb, le sucede otro error por solucionar un problema de fondo con background, entonces cuando achicas ventana y corres el scroll arriba en el id="content_head" y mueves el scroll el fondo no aparece, sino que se ve hasta donde esta el scroll solamente mueves el scroll y ya no se ve. Por ello no lo he querido solucionar con background que es muy fácil.

Probablemente antes de opinar, podrían entender bien que es lo que se pide, solo es comprensión de lectura si es que saben leer bien, y no emitir comentarios fuera de contexto que no tienen nada que ver, ya que no deseo que se estire la imagen, pues la foto se deformaría y tampoco nunca pedí aquello.

Ojala alguien que sepa leer pueda ayudarme o que tomen un curso de comprensión de lectura.

Gracias por nada.

[tresj]

¿Lo que buscas es ocultar el scroll del navegador? En ese caso deberías usar overflow, concretamente overflow:hidden, mira aquí:
http://www.librosweb.es/referencia/css/overflow.html
http://www.cssblog.es/css-la-propiedad-overflow/
saludos

[albertcito]

gracias tresj, conozco la propiedad; mira como todos (me imagino) tienen pantalla de una gran resolución (probablemente) por eso no comprenden el problema.

Sucede que si coloco la pantalla a un ancho de 800px y escondo el scroll entonces no podran visualizar todo el sitio web de manera horizontal.

La pregunta en realidad es si es que se puede hacer a través de los códigos html que coloque arriba y con CSS alguno que cuando se achique la pantalla, entonces la imagen de fondo (que tiene un 'position: absolute' y con eso un 'z-index' que lo deja como fondo) quede de la misma manera pero se la imagen quede centrada y el sitio con un ancho máximo de unos 950px y no más ancho.

Eso es y gracias.

[alexk]

si ya esta susando JS.. para rotar imagenes... en vez de rotar <img> por que no mejor, rotas el background?....
si conoces la propiedad overflow usala
body{overflow-x: hidden;}

[kseso?]

Parece que al que le falta compresión no sólo lectora sino también de css es a usted.
Relea mis palabras, se las reitero, pero ni me molesto en explicárselas por faltón y desagradecido:

<- Sí, sólo necesita definir tamaños en % para que la imagen se muestre siempre completa. Si quiere que se vea a igual tamaño con pérdida de los laterales, vía background posicionado.

Esas son las opciones que tiene para hacerlo con css (2). No hay otras. Si quiere lo aplica, y si no a otro lenguaje y otro foro.
No hay más cera.

Y alomejor Calizman no vio desordenada la lista!, sino que vió una lista desordenada (Unordered List, Ordered List , Definiton List)

[albertcito]

gracias alexk, tienes razón sería la mejor solución al problema, ya que (al parecer) con una lista con position:absolute no se puede hacer.

y "kseso?" podrias leer el punto 2.10 de las Políticas de Foros del Web que dice: "Los usuarios deben usar un lenguaje cortés, respetuoso y gentil" y ser más respetuoso.

[kseso?]

Iniciado por albertcito

y "kseso?" podrias leer el punto 2.10 de las Políticas de Foros del Web que dice: "Los usuarios deben usar un lenguaje cortés, respetuoso y gentil" y ser más respetuoso.

¿Por llamarle faltón y desagradecido? Se lo ganó usted solito a pulso. Después de sus palabras tan corteses, respetuosas y gentiles ¿qué esperaba? ¿un ramo de flores?:

Iniciado por albertcito

Probablemente antes de opinar, podrían entender bien que es lo que se pide, solo es comprensión de lectura si es que saben leer bien, y no emitir comentarios fuera de contexto que no tienen nada que ver,...

Ojala alguien que sepa leer pueda ayudarme o que tomen un curso de comprensión de lectura.

Gracias por nada.

fruto únicamente de su desconocimiento de css, pues no sólo no comprendió la ayuda prestada sino que la interpretó como le vino en gana:

Iniciado por albertcito

ya que no deseo que se estire la imagen, pues la foto se deformaría y tampoco nunca pedí aquello.

Pero ni se merece ni me apetece el explicarle la sugerencia que le hice.