Web tasarım yaparken birçok kullanıcı sitenin renk uyumunu ve arka plan resmini siteyle uyumlu halde tasarlar. Mesela bir film sitesinde arka planda klişe filmlerin kapakları kullanılırken bir oyun sitesinde efsane oyunların görselleri yer alır. Özellikle akılda kalan karakterler kullanılır. Ancak çok yönlü bir web sitesi tasarlayacaksanız her kategori için farklı renk yada görsel kullanmak isteyebilirsiniz. Örneğin kadınlarla ilgili içerikler paylaştığınız bir kategoride pembe ağırlıklı tasarım yaparken, erkeklerle ilgili paylaşım yaptığınız kategoride mavi tonları kullanmanız gerekebilir. Her kategori için ayrı bir class ismi vereceğiz ve her class için CSS’de istediğimiz renk ve arka plan resmi için gerekli kodları tanımlayacağız.

Kategoriler İçin Class Tanımlama

<ul class="icon">
<li class="Anasayfa"><a href="#">Anasayfa</a></li>
<li class="Kadin><a href="#">Kadın</a></li>
<li class="Erkek"><a href="#">Erkek</a></li>
</ul>

Burada dikkat etmeniz gereken nokta her kategori için tanımlanan li tagına bir class ismi verildi. Bu sayede her class’a ayrı ayrı background-image veya background-color özelliği tanımlayıp istediğimiz renk veya resmi atamış olacağız. Yukarıdaki kodu sitenizin görünmesini istediğiniz bir noktaya kopyalayın. Bu işlemi yaptıktan sonra her kategori için farklı arkaplan özelliği vereceğimiz CSS kodlarına geçelim.

Arkaplan Resmi için Gerekli CSS Kodları

.icon
{
list-style: none;
margin: 0;
padding: 0;
}
 
li.Anasayfa
{
background-image: url(bullet_home.png);
background-repeat: no-repeat;
background-position: 0 50%;
padding: 2px 0 2px 10px;
margin: .3em 0;
}
 
li.Kadin
{
background-image: url(kadin_resim.png);
background-repeat: no-repeat;
background-position: 0 50%;
padding: 2px 0 2px 10px;
margin: .3em 0;
}
 
li.Erkek
{
background-image: url(erkek_resim.png);
background-repeat: no-repeat;
background-position: 0 50%;
padding: 2px 0 2px 10px;
margin: .3em 0;
}

Yukarıdaki CSS kodlarında her class için bir resim atandı. Resim yerine sadece renk vermek istiyorsanız background-image kodlarını background-color ile değiştirmeniz gerekiyor. Örnek kullanım;

background-color: red;