Simple CSS related query


I feel the question I am having is pretty simple but as I am new to Web Designing, I have no clue how this would be done,

My Query is like this:

I have a table

.vbar { background: #ffffff url(bullet.png) 0 0 repeat-y; padding-top:16px;}

<td class=vbar> </td>

This places the bullet I need all along in vertical manner.

However the wierd part is depending upon the height I mention the image (bullet.png) sometimes shows up incomplete at the bottom of the table,

I would preferably need a complete image or no image at all,

Any help highly appreciated,

Thank you,
M Max…

Hi mmaxtor! Welcome to SitePoint!

If you are setting heights, you will need to make them multiples of the image height; otherwise you will see partial bits of the image at the bottom. Background images are unaware of the height of an element.

Hey Ralph,

Thank you so very much for instant reply,

If you are setting heights,

The irony is that I am not setting the heights, they expand as per the content …

Any other way round??

Thank you,
M Max…

Yes, setting heights is not a good idea, really, but it sounded like you might be doing it from what you said above.

To be honest, I can’t think of another solution. I’m sure others will comment, though, and there are a lot of creative/knowledgeable people in this forum, so stay tuned!

yes this can be seen in many websites.

this is the way background images work.



We’d probably need to see what effect you were going for to hep further.

If the bullet is supposed to be aligned with some text then you would be better applying it to each element and then it will only show if that element is present.

If its’ just a repeating graphic for effect then you can’t make it stop exactly (although css3 should address this issue with the round property). For now you would need to ensure your page stops at the right height which you may be able to do by adjusting the line-height and margins of the elements you are using but I don’t think it will give a decent result.

You could do it with some js to work out the size and adjust accordingly.