Background-position ignored by Chrome

Question

I'm having a problem with positioning two background images in Chrome. In FF and IE the images are right where I want them to be, but in Chrome they both just sit in the top left corner. So Chrome ignores the background-position property. When I remove the 150px from that property, it works, but I want the images 150px from the bottom.

#wrap {width:100%; position:relative;z-index:1; background-color:#ebebeb; background-image: url("/portals/0/images/bosch_rechtsonder.png"),url("/portals/0/images/meba_linksmidden.png"); background-position: right bottom 150px, left bottom 150px; background-repeat: no-repeat;background-attachment: scroll, scroll;}

Does anyone have another solution to this?

Thanks in advance!

Answer 1

What do you mean by giving 3 values?

background-position: right bottom 150px, left bottom 150px;

The value right is fine, bottom is fine. Why is the 150px there? Remove it. Change it to:

background-position: right bottom, left bottom;

You know that it is a fixed positioning of 150px from the bottom. The only way is to give 150px of whitespace or setting it transparent using an image editor and put it on the background. It cannot be controlled by pure CSS, without knowing the element's height .