Image Issue

[winnard2007]

Hi

I am new to CSS, and i have come up with a design that has an image as a background but the cells and content are over the top of this image and my idea is to have part of the image inside the cells as if the cells were transparent and the image was behind it.

How would i do this using CSS?

Would i have to float the image, or use it as a background image and slice it up?

Any help would be great if you can understand what i am on about.

I have found this site which uses the same idea

[csszengarden.com...]

Please help.

Dan

[ebby]

by cells are you saying you have a table design then? If you're going to use a table I still recommend using a div as a container like this:

<div id="tblholder">
<table></table>
</div>

Then in the stylesheet:

#tblholder{
background-image: url(yourpic.jpg);
}

[winnard2007]

Hi,

I am not having a table design i am totally using CSS. But the image i want it to appear as if it bleeds into the content of my site.

The image basically will bleed from the header area into the main content. So it will appear as if it is behind the main content but has come from the header.

Any help would be massive!

Dan

[edited by: tedster at 9:40 pm (utc) on Oct. 19, 2007]

[penders]

...my idea is to have part of the image inside the cells as if the cells were transparent and the image was behind it.

By the looks, the cssZenGarden link you post simply has a single background image that includes the semi-transparent inner box effect and the title text.

[winnard2007]

Hi Penders

Thanks for the help. Although being a beginner to CSS how would i style a semi transparent inner box effect.

Regards

Dan

[edited by: tedster at 9:39 pm (utc) on Oct. 19, 2007]

[Marshall]

In the <div> you want the background to be transparent, you will need to add this code to your CSS:

/* for IE */
filter:alpha(opacity=60);
/* CSS3 standard */
opacity:0.6;
/* for Mozilla */
-moz-opacity:0.6;

You can read more about it here [w3schools.com]. Just an FYI, it can be a pain in the butt.

Marshall

[penders]

Although being a beginner to CSS how would i style a semi transparent inner box effect.

Yes, you can apply the styles that Marshall gives above to an inner DIV. Although I question the need for

-moz-opacity

anymore. This is only required for very old versions of FF/Mozilla. FF has supported the CSS3

opacity

property since at least FF1 and Mozilla since 1.7

However, the point of my post was, since you gave the cssZenGarden link as an example, was that cssZenGarden does not use any special kind of CSS opacity to create the effect - it is simply all a background image. I think a lot of sites use this technique, to give the effect of opacity when in actual fact there is no 'opacity'. Also the CSS3

opacity

property obviously won't pass the W3C 2.1 CSS validation, if this is of concern.

[ebby]

The image on zen garden is a featherd image. So if that's what you're looking for you may want to open your background image in photoshop and the feather it. You can do this by selecting the layer then in the top menu under "Select" choose "Feather" and then your desired pixel amount. Go back under "Select" and choose "Select Inverse" and then use the eraser tool on the selected area.