1

I try to get multiple background images in one div at the moment. Both must repeat-x.

The first image should start at the top-left point up to 50% of the div.

The second should start at the middle to the right end of the div.

I tried the following: 

.myDiv {
    background-image: url('image1.png'), url('image2.png');
    background-repeat: repeat-x, repeat-x;
    background-position: left top, center top;
    background-size: 50% 100%, 50% 100%;
}

My problem is that only image1 is shown.

ROMANIA_engineer
  • 54,432
  • 29
  • 203
  • 199
flightsearch
  • 79
  • 2
  • 10
  • 1
    The `repeat-x` up to `50%` will be an issue, as you can't have a conditional end point (at least with CSS 2.1). It will just continue repeating horizontally. Unfortunately, you would need to get hacky with overlaying elements to achieve this. – Jack Mar 03 '15 at 19:47
  • @JackPattishall ok thank you for the clarification :( so lets play with two divs then.... – flightsearch Mar 03 '15 at 19:51

3 Answers3

0

Try with that background: url('image1.png'), url('image2.png'); instead of background-image:

Here is a demo in Jsfiddle

You can see both images appear.

Hope it hepls

Devilquest
  • 102
  • 3
  • 3
  • 9
  • same result as my try – flightsearch Mar 03 '15 at 19:26
  • thx for the fiddle tried to make one myself... but my goal is that one image is starting left until the center and the second is starting in the center until the right border – flightsearch Mar 03 '15 at 19:42
  • I don’t know is this can be achieved only with one div background. Repeat is for the axis you choose to repeat. You can't stop where you want (if I’m correct). You can try making one container div, then other 2 inside with one image as bg in each div an place de divs where you want. Here is an example: [link](http://jsfiddle.net/mwc2n95t/) – Devilquest Mar 03 '15 at 20:02
0

Set two background images for the any element like this

background: 
   url(number.png) 600px 10px no-repeat,  /* On top,    like z-index: 4; */
   url(thingy.png) 10px 10px no-repeat,   /*            like z-index: 3; */
   url(Paper-4.png);
Ram kumar
  • 3,152
  • 6
  • 32
  • 49
0

Thanks to Devilquest. I was having issues with "top repeat-x , bottom repeat-x" for 2 images in one div. Works on Chrome, fails on IOS. Swapped to 

 background: url ();
 background-repeat: repeat-x, repeat-x;
 background-position: top , bottom;

and now working fine on safari, iPhones etc

Dave
  • 103
  • 1
  • 2
  • 8