1

i'm trying to use 2 background images on a div, im using theese style for this

  background:url(../images/bg1.png),url(../images/bg2.png);

but all images are like position absolute, they are on each other so i use

  background-position:0px 0px,40px 0px;
  background-repeat:no-repeat,no-repeat;

when i try this 2. background dissapears, how can i fix this?

Dan Blows
  • 20,846
  • 10
  • 65
  • 96
Malixxl
  • 525
  • 2
  • 9
  • 19
  • 2
    When you say it 'disappears' - how wide is the element? More than 40px I guess? It's possible that setting the background images with a `background-image` attribute (instead of the shortcut `background`) might fix it. – Dan Blows Feb 01 '12 at 20:19
  • In jsfiddle this seems to work with background or background-image (in Firefox and Safari, anyway): http://jsfiddle.net/SRDks/. What browser are you looking in? – Dan Blows Feb 01 '12 at 20:23
  • lol yes, my bad. it's about background image size. Thanks. – Malixxl Feb 01 '12 at 20:24
  • @Malixxi As in the question was wrong, or you've just fixed it? – Dan Blows Feb 01 '12 at 20:26
  • bg1 was wider than 40px, i tought it was not. when i read your comment i look it again then i see my mistake. – Malixxl Feb 01 '12 at 20:27
  • +1 for bringing the ability to have multiple background images on one element to my attention! Awesomeness. – Nathan Arthur Feb 01 '12 at 21:00

2 Answers2

1

As discussed in comments, seems that the container is too narrow. It's 'disappearing' because the position is wider than the element.

Dan Blows
  • 20,846
  • 10
  • 65
  • 96
-1

I could be wrong, but I didn't know multiple background is allowed.

Since I'm assuming that you're using translucent png's, why don't just put them in 2 divs and wrap one inside another?

Yi Yang
  • 31
  • 2