Background-position {bottom-30px?}

I know that we can’t currently calculate “bottom-30px” as a background position with css3, however, that’s exactly what I need to do.

I need to accommodate an absolutely positioned nav menu which sits at the bottom of the element which has the background image.

Since the menu is 30 pixels tall, I’d like to place css on the nav menu which effectively adjusts the parent container’s margin up 30 pixels so that the background image appears to begin just at the top of the nav menu.

As it is, the nav menu is overlaying the bottom 30 pixels of the background image.

I’m currently using this as a workaround:

.containerDiv {position:relative; background-position:left bottom}
.menu {position:absolute; bottom:-30px}

I think that’s how I’d do it too. I would probably place at least 30px margin on the bottom of the container, too, to make sure no other elements slip underneath the menu.

or add 30px blank space to the bottom of the image :slight_smile:

Sneaky devil. :lol:

Here’s another sneaky way for IE8+ and all other modern browsers.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.test {
    width:300px;
    height:500px;
    border:1px solid #000;
    position:relative;
}
.test:before {
    content:" ";
    display:block;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:30px;
    background:url(images/drop-down-image.jpg) no-repeat 0 100%;
    z-index:-1;
}
</style>
</head>
<body>
<div class="test"><p>test</p></div>
</body>
</html>

I’m beginning to think that you don’t need any of this new stuff as you can do it all with before and after :slight_smile:

CSS3 adds support for things like background-position:bottom 30px but only latest version of Opera [URL=“http://www.standardista.com/css3/css3-background-properties”]supports it at the moment.

Yep, that’d work too. Unless the menu is not present or hidden by choice of the user.

I run into this issue often with css. I want the presence of one piece of content to influence the other, however, I had to take it out of the flow in order to get it positioned at the bottom of its parent container. Once I did that, I lost the influence it could have on its siblings.

It all depends on the exact dynamics but sometimes you can simply start the element after the container and drag it upwards so that it appears at the bottom of the element above. However, you always end up with a space that needs to be controlled explicitly so preserving space with padding and then dropping an absolute element into that space is much the same.

One of my wishes for CSS was a float:bottom but as yet I have only accomplished that for Firefox.