Problem with background image in CSS

[turbia]

Hi! I'm the webmaster of the happily-hosted website http://turbia.net

Do you know how can I make that vida.png background in the bottom-right corner of the web does not interfere with the black text? now it fades it and I don't want that result... I have tried with z-index property with no success... any idea?

Also, I don't know why, but some times that image appears in grey :confused: in firefox.

Comments and critics about the webpage are welcome.

Regards.

[charlesgan]

the flower bg seem to appear in firefox.
not it IE.. i seeing a tall square thing.

you are using the div after the text
<div id="vida"></div>
this make the div appear on top of the text.
this also mean i cant select the text below the div.

try move the div vida property to the
background property.
which mean the vida.png is appear in the #background

[turbia]

#background does not exist in the web... I have tried to add background property to body with no results :S

I'm new to css, how would you define that #background property and where?

Thank you in advance.

[Basil]

Add this to '#contenido'..
background: url('./img/vida.png') no-repeat right bottom;

And remove the entire '#vida' thing from the css and the vida div from the html.

I suggest instead of having a transparent background for the PNG you give it a white background, or whatever the background of the page is, because some browsers (ie6) have trouble displaying transparent PNG images without a little help. They will fill in the transparent bits with grey.

[turbia]

It works! thank you very much! :)

I'll substitute the png for another one without transparency,

[charlesgan]

i mean setting the background property...
the image can be forced to appear on botton right.

refer this doc
http://www.w3.org/TR/CSS21/colors.html
section.. 'background-position' onward

[turbia]

Thank you for the tip and the link.

I have been trying to set the bottom image start at the blue line, but I can't :S. I have tried to put a background-position with % but I don't obtain the desired result.

background: url('./img/vida.png') no-repeat;
background-position: bottom right;

I have only made it work on a page with fixed height:

http://turbia.net/contacto/
background-position: 100% 164%;

Any idea? thank you very much!

[Basil]

http://semlar.biz/bh/turbia.html?

[turbia]

Thank you very much! it's solved now :D

[turbia]

http://turbia.net/tutoriales/tutorial-guia-manual-671.htm

There the image appears not in the bottom... any idea on how to solve it?

Thank you very much in advance again.

[turbia]

#pie {
background-color: #FFF;
}

#central {
background: url('/img/vida.png') no-repeat right bottom;
}


Solved! :D