0

Codepen

I have two images that shall be one. Concept image:

enter image description here



The height (outer image) will be always 773px. I want to have the image with an width of 100% without stretching the image. So I need/want to use reapeat-x. But since the inner image needs an padding/margin to fit into the outer image this is a bit problematic.

So what I've tried is repeating the outer image and copying the inner image with an :after element. But I really dislike this option since it breaks when zooming.

So my question is: How can I deal better with this situation?

boop
  • 7,413
  • 13
  • 50
  • 94
  • What does your code look like? – zgood Apr 13 '15 at 16:43
  • @zgood hm? What code are you asking for? – boop Apr 13 '15 at 16:47
  • Sorry I must have missed your CodePen link – zgood Apr 13 '15 at 16:51
  • AFAIK there is no way how to mimic `background-repeat` property with elements, which is what you need to achieve. There is experimental feature in firefox called [`element()`](https://developer.mozilla.org/en-US/docs/Web/CSS/element), but it is not supported in other browsers. I think the only solution would be define one div containing the scene and then repeat that scene horizontally with JavaScript. – Rudolf Gröhling Apr 13 '15 at 17:04

0 Answers0