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!

score 0 · Answer 1 · answered Jan 22 '13 at 15:27

0

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.

answered Jan 22 '13 at 15:27

Praveen Kumar Purushothaman

164,888
24
203
252

Did you see `When I remove the 150px from that property, it works, but I want the images 150px from the bottom`? – Xymostech Jan 22 '13 at 15:28
1

`bottom 150px` or `right 150px` is also valid, but not `right bottom 150px` – RayViljoen Jan 22 '13 at 15:29
@Xymostech I didn't. Updated the answer. – Praveen Kumar Purushothaman Jan 22 '13 at 15:30
Thank you for your answers. I solved it by adding transparent pixels to my images. – sdx Jan 22 '13 at 15:55

Background-position ignored by Chrome

1 Answers1