Örnek bir tasarım bırakıyorum, ister kodları kopyalayın(Önermem) ister bakarak aynılarını yazın(Öneririm) ister referans alarak sıfırdan benzerini ellerinizle yazın(Daha çok öneririm) :))
A pen by CapScroLL
Önizleme:
1- Resmin 4 tane görünmesinin nedeni tekrarlanması bunu en basitinden iki şekilde çözebilirsiniz;
background: url('resimyolu.jpg') no-repeat; Buradaki "no-repeat" kodu resmin tekrarlanmasını önleyecektir.
background-repeat: no-repeat; Bu da üstteki koda eklenen "no-repeat" ile aynı işlemi yapar.
2- Transparan bir kare istiyorsanız rgba yani RED GREEN BLUE ALPHA renk modelini kullanabilirsiniz, örneğin;