<!DOCTYPE html><html><head><metacharset="utf-8"><title>CSS Backgrounds and Borders Test: background-size - one <percentage> value at maximum</title><linkrel="author"title="Intel"href="http://www.intel.com"><linkrel="reviewer"title="Gérard Talbot"href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"><!-- 2012-11-09 --><linkrel="help"href="http://www.w3.org/TR/css3-background/#the-background-size"title="3.9. Sizing Images: the 'background-size' property"><linkrel="match"href="../reference/ref-filled-green-100px-square.xht"><metaname="flags"content="image"><metaname="assert"content="Check if 'background-size' is '100%', maximum width of the positioning area in percentage, then such value is the width of the corresponding image and the second value (corresponding to the height of the background image) is assumed to be 'auto'. An 'auto' value for one dimension is resolved by using the image's intrinsic ratio (in this test, the image's intrinsic ratio is 1:1) and (multiplied by) the size of the other dimension. Therefore the used height of the background-size in this test should be 100px."><style>div{height:100px;width:100px;}#ref-overlapped-red{background-color:red;}#test-overlapping-green{background-image:url(support/50x50-green.png);background-repeat:no-repeat;background-size:100%;bottom:100px;position:relative;}</style></head><body><p>Test passes if there is a filled green square and <strong>no red</strong>.</p><divid="ref-overlapped-red"></div><divid="test-overlapping-green"></div></body></html>
