imagen de fondo y color de fondo incompatibles?

[wesse]

Hola.
Resulta que si indico una imagen repetida en "y" y un color de fondo para cuando el div tiene mas altura que la imagen, no me aparece el color de fondo y solo se ve la imagen. porque puede ocurrir esto?

[cristian_cena]

Hola wesse:

Si el div es del mismo ancho que la imagen es porque estas repitiendo la imagen en el eje y. si le pones no-repeat se verá el fondo.

Poné el código, así no hablamos sobre la nada.

Saludos.

[wesse]

La imagen ha de repetirse en x pero no en y. En y es el alto de la imagen, y lo que sobresalga de eso, rellenarse con color

Código HTML:

<style type="text/css">
<!--

	.fondo {
		background-color: #900;
		background: url(/images/fondo.jpg) top repeat-x;
	}
-->
</style>

  <div class="fondo">
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    
  <p>aa</p>
  </div> 

[cristian_cena]

ok.

puedes hacerlo por ejemplo asi: (css shorthand)

Código CSS:

background:#900 url(test.gif) 0 0 repeat-x;
 

o así

Código CSS:

background-color: #900; /*aca lo pongo arriba porque no lo pisamos despues*/
background-image:url(test.gif);
background-position:0 0;
background-repeat;
 

pero evita usar ambas formas al mismo tiempo para no confundirte en detalles. pues habrías podido hacerlo así:

Código CSS:

background:url(test.gif) 0 0 repeat-x;
background-color: #900;
 

ya que al poner background-color arriba y background abajo y dejarle vacio el lugar donde debías declararle el background-color el navegador lo pisa al estilo, y queda vacío.

Saludos.

[kseso?]

Cambie el orden de las declaraciones y verá qué ocurre.

Si utiliza la propiedad acortada junto a las exprofesas, pongala la primera. Así evitará sobreescribirlas al valor por defecto, que en el caso de background-color es transparent

[wesse]

keseso si pongo primero el backgroun y luego el background-color lo que ocurre es que la imagen se repite en x y en y.

[wesse]

Cristian de esa manera tampoco funciona, la imagen se repite siempre en x y en y

[cristian_cena]

hola wesse, hazte una pausa y controla tus estilos, está bien lo que te indicamos.

El repeat lo escribis al final en el modo shorthand:
background:url(test.gif) 0 0 repeat-x;
(si no le pasas nada css va a interpretar que quieres que se repita tanto en x como en y)
o usas la propiedad"background-repeat: ... ;" acá mas info sobre los valores que le podes pasar.

Saludos.

[wesse]

Cierto, debi poner algo mal en la prueba que hice :S
Gracias!!