Hi
The CSS property "Overflow: visible;" lets the content of a box flow over the original dimensions of the box itself.
What I need is Overflow: visible; for a background image, so that the image, which dimensions are bigger than the box, is visible on the bottom left, bottom and bottom right of the box. The content of the box is smaller than the dimensions of the box.
example: below is an illustration.
the image is defined as
#box {background:url(xxx.gif) no-repeat;
background-position: -10px 10px;
overflow: visible; }
the box may be a div, li, ul, whatever.
---------------------------
| page |
| -/-/-/-/-/-/ |
| | box | |
| ___/__________/___ |
| | | X x | | |
| | x / / x | |
| | -/-/-/-/-/-/ | |
| | x | |
| | x image x | |
| |x x x | |
| |__________________| |
| |
---------------------------
What I guess is that Overflow: visible; does NOT apply for the background(-image). It makes absolutely sense to me that the background does not flow over the edges of a box, but I need it to do so.
My question: Is there any way to get "Overflow: visible;" working for the background-image?
I need it for the menu of <!-- m --><a class="postlink" href="http://www.nei.ch/links/">http://www.nei.ch/links/</a><!-- m --> . The active menu option has a special image below to get a nice transition to the submenu row. With Overflow: visible for the background, I could make 1 large image for the active menu option (112px wide) + the image below it (131px wide).
Thanks - Andyto be more precise:
this menu: <!-- w --><a class="postlink" href="http://www.nei.ch/phpBB/">www.nei.ch/phpBB/</a><!-- w -->
has a active list element "Forum" and below this element is a special image.
I 'd like to merge these two images, make it the background of the menu item "Forum" and let it overflow on the bottom:
the merged image would look like this:
<!-- m --><a class="postlink" href="http://www.nei.ch/images/menu/tab-forum-active-131x75px.gif">http://www.nei.ch/images/menu/tab-forum ... 1x75px.gif</a><!-- m --> (transparent on upper left and right).
The CSS property "Overflow: visible;" lets the content of a box flow over the original dimensions of the box itself.
What I need is Overflow: visible; for a background image, so that the image, which dimensions are bigger than the box, is visible on the bottom left, bottom and bottom right of the box. The content of the box is smaller than the dimensions of the box.
example: below is an illustration.
the image is defined as
#box {background:url(xxx.gif) no-repeat;
background-position: -10px 10px;
overflow: visible; }
the box may be a div, li, ul, whatever.
---------------------------
| page |
| -/-/-/-/-/-/ |
| | box | |
| ___/__________/___ |
| | | X x | | |
| | x / / x | |
| | -/-/-/-/-/-/ | |
| | x | |
| | x image x | |
| |x x x | |
| |__________________| |
| |
---------------------------
What I guess is that Overflow: visible; does NOT apply for the background(-image). It makes absolutely sense to me that the background does not flow over the edges of a box, but I need it to do so.
My question: Is there any way to get "Overflow: visible;" working for the background-image?
I need it for the menu of <!-- m --><a class="postlink" href="http://www.nei.ch/links/">http://www.nei.ch/links/</a><!-- m --> . The active menu option has a special image below to get a nice transition to the submenu row. With Overflow: visible for the background, I could make 1 large image for the active menu option (112px wide) + the image below it (131px wide).
Thanks - Andyto be more precise:
this menu: <!-- w --><a class="postlink" href="http://www.nei.ch/phpBB/">www.nei.ch/phpBB/</a><!-- w -->
has a active list element "Forum" and below this element is a special image.
I 'd like to merge these two images, make it the background of the menu item "Forum" and let it overflow on the bottom:
the merged image would look like this:
<!-- m --><a class="postlink" href="http://www.nei.ch/images/menu/tab-forum-active-131x75px.gif">http://www.nei.ch/images/menu/tab-forum ... 1x75px.gif</a><!-- m --> (transparent on upper left and right).