Results 1 to 2 of 2

Thread: Background and Overflow: visible

  1. #1
    Join Date
    Jan 2004

    Background and Overflow: visible


    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 http://www.nei.ch/links/ . 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 - Andy

  2. #2
    Join Date
    Jan 2004
    to be more precise:
    this menu: www.nei.ch/phpBB/
    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:
    http://www.nei.ch/images/menu/tab-fo...e-131x75px.gif (transparent on upper left and right).

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center