layout background 01

layout background 01

by Boba Poshtar

HTML

<ul>
	<li>item 1</li>
	<li>item 2</li>
	<li class="active">item 3</li>
	<li>item 4</li>
	<li>item 5</li>
	<li>item 6</li>
</ul>

<div class="smile">left top</div>
<div class="smile bg2">center top</div>
<div class="smile bg3">right top</div>
<div class="smile bg4">left center</div>
<div class="smile bg5">center center</div>
<div class="smile bg6">right center</div>
<div class="smile bg7">left bottom</div>
<div class="smile bg8">center bottom</div>
<div class="smile bg9">right bottom</div>
<div class="smile bg10">50%</div>
<div class="smile bg11">70% 20%</div>
<div class="smile bg12">16px</div>
<div class="smile bg13">4px 20px</div>
<div class="smile repeat">repeat</div>
<div class="smile repeat-x">repeat-x</div>
<div class="smile repeat-y">repeat-y</div>
<div class="smile repeat center">repeat center</div>

<div class="multi-bg"></div>

CSS

ul { padding: 0; list-style: none;}
li { padding: 5px 0 5px 32px;
	background: url(https://poshtarboba.github.io/fe/img/li_green.png) no-repeat left center;
}
li.active { color: red; font-weight: bold;
	background-image: url(https://poshtarboba.github.io/fe/img/li_red.png);
}

.smile { width: 120px; height: 80px; margin: 0 16px 16px 0; float: left; border: 1px solid #999; color: #333;
	background: url(https://poshtarboba.github.io/fe/img/smile_bg.png) no-repeat left top;
}
.smile.bg2 { background-position: center top;}
.smile.bg3 { background-position: right top;}
.smile.bg4 { background-position: left center;}
.smile.bg5 { background-position: center center;}
.smile.bg6 { background-position: center right;}
.smile.bg7 { background-position: bottom left;}
.smile.bg8 { background-position: bottom center;}
.smile.bg9 { background-position: bottom right;}
.smile.bg10 { background-position: 50%;}
.smile.bg11 { background-position: 70% 20%;}
.smile.bg12 { background-position: 16px;}
.smile.bg13 { background-position: 4px 20px;}
.smile.repeat { background-repeat: repeat;}
.smile.repeat-x { background-repeat: repeat-x;}
.smile.repeat-y { background-repeat: repeat-y;}
.smile.repeat.center { background-position: center center;}

.multi-bg { width: 250px; height: 180px; float: left; border: 1px solid #999;
	background:
		url(https://poshtarboba.github.io/fe/img/smile.png) no-repeat left top,
		url(https://poshtarboba.github.io/fe/img/smile.png) no-repeat center top,
		url(https://poshtarboba.github.io/fe/img/smile.png) no-repeat right top,
		url(https://poshtarboba.github.io/fe/img/smile.png) no-repeat left center,
		url(https://poshtarboba.github.io/fe/img/smile.png) no-repeat center center,
		url(https://poshtarboba.github.io/fe/img/smile.png) no-repeat right center,
		url(https://poshtarboba.github.io/fe/img/smile.png) no-repeat left bottom,
		url(https://poshtarboba.github.io/fe/img/smile.png) no-repeat center...