2021-11-04 08:33:00 -03:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" / >
< title > CSS Background Tests< / title >
< style >
.example {
width: 45%;
display: inline-block;
}
.box {
width: 180px;
height: 160px;
border: 1px solid black;
padding: 5px 10px 15px 20px;
overflow: auto;
}
.force-scroll {
width: 500px;
height: 500px;
}
code {
display: block;
}
< / style >
< / head >
< body >
< h1 > CSS Background Tests< / h1 >
< p > These are in no way exhaustive, but they cover a variety of different features.< / p >
< p > The left and right columns should look identical - left uses a single background shorthand, and right uses separate properties.< / p >
< h2 > Attachment< / h2 >
< h3 > Should remain motionless relative to the browser window< / h3 >
< div class = "example" >
< code > background: url('background-repeat.png') fixed< / code >
< div class = "box" style = "background: url('background-repeat.png') fixed" >
< div class = "force-scroll" > < / div >
< / div >
< / div >
< div class = "example" >
< code >
background-image: url('background-repeat.png');< br / >
background-attachment: fixed;
< / code >
< div class = "box" style = "background-image: url('background-repeat.png'); background-attachment: fixed;" >
< div class = "force-scroll" > < / div >
< / div >
< / div >
< h3 > Should scroll with box content< / h3 >
< div class = "example" >
< code > background: url('background-repeat.png') local< / code >
< div class = "box" style = "background: url('background-repeat.png') local" >
< div class = "force-scroll" > < / div >
< / div >
< / div >
< div class = "example" >
< code >
background-image: url('background-repeat.png');< br / >
background-attachment: local;
< / code >
< div class = "box" style = "background-image: url('background-repeat.png'); background-attachment: local" >
< div class = "force-scroll" > < / div >
< / div >
< / div >
< h3 > Should remain motionless relative to the box< / h3 >
< div class = "example" >
< code > background: url('background-repeat.png') scroll< / code >
< div class = "box" style = "background: url('background-repeat.png') scroll" >
< div class = "force-scroll" > < / div >
< / div >
< / div >
< div class = "example" >
< code >
background-image: url('background-repeat.png');< br / >
background-attachment: scroll;
< / code >
< div class = "box" style = "background-image: url('background-repeat.png'); background-attachment: scroll" >
< div class = "force-scroll" > < / div >
< / div >
< / div >
< h2 > Position< / h2 >
< div class = "example" >
< code > background: url('background-repeat.png') bottom 5% right 10px no-repeat< / code >
< div class = "box" style = "background: url('background-repeat.png') bottom 5% right 10px no-repeat" > < / div >
< / div >
< div class = "example" >
< code >
background-image: url('background-repeat.png');< br / >
background-position: bottom 5% right 10px no;< br / >
background-repeat: no-repeat;
< / code >
< div class = "box" style = "background-image: url('background-repeat.png'); background-position: bottom 5% right 10px; background-repeat: no-repeat" > < / div >
< / div >
< h2 > Clip and Origin< / h2 >
< h3 > Images should fill the content-box, with padding on each side. (5px, 10px, 15px, 20px) and aligned so their top-left corner will be at the top-left of the box. This produces clipping.< / h3 >
< div class = "example" >
2021-11-15 18:08:49 -03:00
< code > background: url('background-repeat.png') yellow padding-box content-box< / code >
< div class = "box" style = "background: url('background-repeat.png') yellow padding-box content-box" > < / div >
2021-11-04 08:33:00 -03:00
< / div >
< div class = "example" >
< code >
background-image: url('background-repeat.png');< br / >
2021-11-15 18:08:49 -03:00
background-color: yellow;< br / >
2021-11-04 08:33:00 -03:00
background-origin: padding-box;< br / >
background-clip: content-box;
< / code >
2021-11-15 18:08:49 -03:00
< div class = "box" style = "background-image: url('background-repeat.png'); background-color: yellow; background-origin: padding-box; background-clip: content-box" > < / div >
2021-11-04 08:33:00 -03:00
< / div >
< h2 > Size< / h2 >
< h3 > Image should be stretched as large as the box, without distorting or clipping< / h3 >
< div class = "example" >
< code > background: url('background-repeat.png') center / contain< / code >
< div class = "box" style = "background: url('background-repeat.png') center / contain" > < / div >
< / div >
< div class = "example" >
< code >
background-image: url('background-repeat.png');< br / >
background-position: center;< br / >
background-size: contain;
< / code >
< div class = "box" style = "background-image: url('background-repeat.png'); background-position: center; background-size: contain" > < / div >
< / div >
< h3 > Image should be stretched so that the whole box is covered, without distorting< / h3 >
< div class = "example" >
< code > background: url('background-repeat.png') center / cover< / code >
< div class = "box" style = "background: url('background-repeat.png') center / cover" > < / div >
< / div >
< div class = "example" >
< code >
background-image: url('background-repeat.png');
background-position: center;
background-size: cover;
< / code >
< div class = "box" style = "background-image: url('background-repeat.png'); background-position: center; background-size: cover" > < / div >
< / div >
< h3 > Images should be squashed and repeated< / h3 >
< div class = "example" >
< code > background: url('background-repeat.png') top / 50% 25px< / code >
< div class = "box" style = "background: url('background-repeat.png') top / 50% 25px" > < / div >
< / div >
< div class = "example" >
< code >
background-image: url('background-repeat.png');
background-position: top;
background-size: 50% 25px;
< / code >
< div class = "box" style = "background-image: url('background-repeat.png'); background-position: top; background-size: 50% 25px" > < / div >
< / div >
< h2 > Repeat< / h2 >
< p > See < a href = "background-repeat-test.html" > here< / a > for in-depth background-repeat tests.< / p >
< h3 > Images should all be whole, and be spaced apart to fill the box< / h3 >
< div class = "example" >
< code > background: url('background-repeat.png') space< / code >
< div class = "box" style = "background: url('background-repeat.png') space" > < / div >
< / div >
< div class = "example" >
< code >
background-image: url('background-repeat.png');
background-repeat: space;
< / code >
< div class = "box" style = "background-image: url('background-repeat.png'); background-repeat: space" > < / div >
< / div >
< h3 > Images should all be whole, and be distorted to fill the box< / h3 >
< div class = "example" >
< code > background: url('background-repeat.png') round< / code >
< div class = "box" style = "background: url('background-repeat.png') round" > < / div >
< / div >
< div class = "example" >
< code >
background-image: url('background-repeat.png');< br / >
background-repeat: round;
< / code >
< div class = "box" style = "background-image: url('background-repeat.png'); background-repeat: round" > < / div >
< / div >
2021-11-15 18:08:49 -03:00
< h3 > Images should all be whole, and be shrunk and spaced to fill the box< / h3 >
< div class = "example" >
< code > background: url('background-repeat.png') space round< / code >
< div class = "box" style = "background: url('background-repeat.png') space round" > < / div >
< / div >
< div class = "example" >
< code >
background-image: url('background-repeat.png');< br / >
background-repeat: space round;
< / code >
< div class = "box" style = "background-image: url('background-repeat.png'); background-repeat: space round" > < / div >
< / div >
2021-11-04 08:33:00 -03:00
< h2 > Multiple backgrounds< / h2 >
< h3 > Should have one smiley face in each corner and one in the center< / h3 >
< div class = "example" >
< code >
background: url('background-repeat.png') no-repeat top 5px left 5px,< br / >
url('background-repeat.png') no-repeat top 5px right 5px,< br / >
url('background-repeat.png') no-repeat bottom 5px left 5px,< br / >
url('background-repeat.png') no-repeat bottom 5px right 5px,< br / >
url('background-repeat.png') no-repeat center cyan;
< / code >
< div class = "box" style = "background: url('background-repeat.png') no-repeat top 5px left 5px, url('background-repeat.png') no-repeat top 5px right 5px, url('background-repeat.png') no-repeat bottom 5px left 5px, url('background-repeat.png') no-repeat bottom 5px right 5px, url('background-repeat.png') no-repeat center cyan" > < / div >
< / div >
< div class = "example" >
< code >
background-color: cyan;< br / >
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;< br / >
background-position: top 5px left 5px, top 5px right 5px, bottom 5px left 5px, bottom 5px right 5px, center;< br / >
background-image: url('background-repeat.png'), url('background-repeat.png'), url('background-repeat.png'), url('background-repeat.png'), url('background-repeat.png');
< / code >
< div class = "box" style = "background-color: cyan ;
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
background-position: top 5px left 5px, top 5px right 5px, bottom 5px left 5px, bottom 5px right 5px, center;
background-image: url('background-repeat.png'), url('background-repeat.png'), url('background-repeat.png'), url('background-repeat.png'), url('background-repeat.png');">< / div >
< / div >
< / body >
< / html >
