Background Image Cutoff in Webkit and Opera

In Webkit and Opera a background image doesn’t fully expand to it’s height like it does in Firefox and IE, it only remains behind the content.

The table cell styled with the following properties appears to expand its height fully to the tip of the previous table cell that has the background image applied.

.c_nosig {
border-top: 0 !important;
padding: 0;
height: 1%;
vertical-align: top;
width: 100%;
}

I’m using ZetaBoards, a free forum provider, so these elements are default.

Sorry Cory, could you provide more code? I don’t even see a background mentioned in the code posted above??

Why is there a cell if its height is being set to 1%?

I’m totally not familiar with ZetaBoards. You should post a bit of example HTML of the area in question.

You’re welcome! GLad it worked.

Hi, tables are only meant to shrinkwrap to the content, Assuming the pink image is the image we are talking about…

Background images have no influence on the height/width of the element. They only fully show/show how yo uwant if the width/height is correct.

You need to set a height on the <td> (or a min-height) (as I said earlier ;)) :slight_smile:

http://s1.zetaboards.com/CutoffPreview/topic/3409441/

There’s an example.

I’m sure you two have developer tools to mess with the CSS, so have fun. :smiley:

Something about teh 1% height cell covering the other cell who does have the image… that’s what I need to see what’s going on.

Hi, as Stomme mentioned…no image there :slight_smile:

You could set a min-height on the table cell to relect the height on the image :slight_smile:

Just about. Our image is 193 pixels in height, that image is 200 pixels high.

Is the pink testing area where the bg image would be on the live site?

I tried it before and it didn’t work, so I must have been doing something wrong. But it works now, so thanks!