| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| .imageDiv { |
| display: inline-block; |
| width: 25%; |
| padding-bottom: 25%; |
| border: 5px solid black; |
| } |
| |
| .firstImage { |
| background-image: url(resources/red-red-green.png); |
| |
| /* Relative to the background positioning area. 75% of containing block width in this case. */ |
| background-size: 300% 100%; |
| |
| /* Relative to background positioning area - background image size. |
| 100 times (-50% of view width) = -5000% of containing block width. |
| size is 75% of view width, so this is always 66.666 tiles, so we start 2/3 of the way into the image. |
| */ |
| background-position: 10000% 0; |
| } |
| |
| .secondImage { |
| background-image: url(resources/red-green-red.png); |
| |
| background-size: 300% 100%; |
| |
| /* As above, but now we start 1/3 of the way into the image. */ |
| background-position: 20000% 0; |
| } |
| |
| .thirdImage { |
| background-image: url(resources/red-red-green-vertical.png); |
| |
| /* Relative to the background positioning area. 75% of containing block width in this case. */ |
| background-size: 100% 300%; |
| |
| /* Relative to background positioning area - background image size. |
| 100 times (-50% of view width) = -5000% of containing block width. |
| size is 75% of view width, so this is always 66.666 tiles, so we start 2/3 of the way into the image. |
| */ |
| background-position: 0 10000%; |
| } |
| |
| .fourthImage { |
| background-image: url(resources/red-green-red-vertical.png); |
| |
| background-size: 100% 300%; |
| |
| /* As above, but now we start 1/3 of the way into the image. */ |
| background-position: 0 20000%; |
| } |
| </style> |
| </head> |
| <body> |
| <div style="display: block; width: 671px; height: 200px;"> |
| <div class="firstImage imageDiv"></div> |
| <div class="secondImage imageDiv"></div> |
| </div> |
| <br> |
| <div style="display: block; width: 671px; height: 200px;"> |
| <div class="thirdImage imageDiv"></div> |
| <div class="fourthImage imageDiv"></div> |
| </div> |
| </body> |
| </html> |
