CSS’te “Background” Özelliği
CSS’in “background” özelliği, web sayfalarının tasarımında adeta bir tuval gibi işlev görür. Bu özellik sayesinde bir elementin arka planını istediğiniz gibi renklendirebilir, bir görselle süsleyebilir veya daha da yaratıcı düzenlemeler yapabilirsiniz. Bakınız:
background-colorbackground-imagebackground-repeatbackground-positionbackground-sizebackground-attachmentbackground-clipbackground-originbackground-blend-mode
1. background-color
Bu özellik, bir elementin arka plan rengini belirler. İster düz bir renk, ister opak bir ton kullanabilirsiniz.
- Varsayılan Değer:
transparent - Diğer Değerler:
renk isimleri(örneğin:red,blue)hex kodları(örneğin:#ffffff)rgb()vergba()(örneğin:rgb(255, 255, 255)veyargba(255, 255, 255, 0.5))hsl()vehsla()(örneğin:hsl(0, 100%, 50%)veyahsla(0, 100%, 50%, 0.5))
2. background-image
Arka plana bir görsel eklemek için birebir. URL belirterek görselinizi kullanabilirsiniz.
- Varsayılan Değer:
none - Diğer Değerler:
url('dosya-yolu')(örneğin:url('image.jpg'))linear-gradient()(örneğin:linear-gradient(to right, red, blue))radial-gradient()(örneğin:radial-gradient(circle, red, blue))conic-gradient()(örneğin:conic-gradient(red, blue))
3. background-repeat
Görselin tekrar edilip edilmeyeceğini kontrol eder.
- Varsayılan Değer:
repeat - Diğer Değerler:
no-repeatrepeat-xrepeat-yspaceround
4. background-position
Arka plan görselinin başlangıç noktasını tanımlar. Sağ üst köşede mi, merkezde mi? Sizin seçiminize kalmış.
- Varsayılan Değer:
0% 0%(veyatop left) - Diğer Değerler:
- Anahtar kelimeler:
top,bottom,left,right,center - Yüzde değerleri:
50% 50% - Uzunluk birimleri:
10px 20px
- Anahtar kelimeler:
5. background-size
Görselin boyutunu ayarlamak için harika bir özellik. Tüm ekranı kaplasın mı, yoksa boyutları orijinal mi kalsın?
- Varsayılan Değer:
auto - Diğer Değerler:
covercontain- Uzunluk veya yüzde değerleri:
100px 50px,50% 50% auto auto
6. background-attachment
Bu özellik, arka planın kaydırılıp kaydırılmayacağını kontrol eder.
- Varsayılan Değer:
scroll - Diğer Değerler:
fixedlocal
7. background-clip
Arka planın hangi element sınırları içinde görüneceğini ayarlar.
- Varsayılan Değer:
border-box - Diğer Değerler:
padding-boxcontent-box
8. background-origin
Arka planın nereden başlayacağını tanımlar.
- Varsayılan Değer:
padding-box - Diğer Değerler:
border-boxcontent-box
9. background-blend-mode
Arka plan renkleri ve görselleri arasındaki karışım modunu tanımlar.
- Varsayılan Değer:
normal - Diğer Değerler:
multiplyscreenoverlaydarkenlightencolor-dodgecolor-burnhard-lightsoft-lightdifferenceexclusionhuesaturationcolorluminosity
Tüm bunları kullandığımız bir örnek yapalım:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Background Örnekleri</title>
<style>
/* Genel kutu stilleri */
.box {
width: 300px;
height: 150px;
margin: 20px auto;
border: 2px solid black;
color: white;
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
}
/* 1. background-color */
/* Arka plan rengini belirler */
.background-color {
background-color: lightblue; /* Arka plan rengi açık mavi */
}
/* 2. background-image */
/* Arka plana bir görsel ekler */
.background-image {
background-image: url('https://via.placeholder.com/300'); /* Görsel URL */
background-size: cover; /* Görsel tüm alanı kaplar */
}
/* 3. background-repeat */
/* Görselin tekrar edilip edilmeyeceğini belirler */
.background-repeat {
background-image: url('https://via.placeholder.com/50'); /* Küçük bir desen */
background-repeat: no-repeat; /* Tekrar edilmez */
}
/* 4. background-position */
/* Görselin başlangıç noktasını belirler */
.background-position {
background-image: url('https://via.placeholder.com/300'); /* Görsel */
background-position: center; /* Görsel ortalanır */
background-repeat: no-repeat; /* Tekrar edilmez */
}
/* 5. background-size */
/* Görselin boyutunu ayarlar */
.background-size {
background-image: url('https://via.placeholder.com/300'); /* Görsel */
background-size: contain; /* Görsel, kutu içine sığacak şekilde ölçeklenir */
background-repeat: no-repeat; /* Tekrar edilmez */
}
/* 6. background-attachment */
/* Arka planın kaydırma sırasında sabit olup olmayacağını belirler */
.background-attachment {
background-image: url('https://via.placeholder.com/300'); /* Görsel */
background-attachment: fixed; /* Görsel sabit kalır */
background-size: cover; /* Görsel tüm alanı kaplar */
}
/* 7. background-clip */
/* Arka planın hangi sınırlar içinde görüneceğini belirler */
.background-clip {
background-color: lightcoral; /* Arka plan rengi */
background-clip: content-box; /* Arka plan sadece içerik kutusunda görünür */
padding: 20px; /* Dolgu ekledik, bu alanda görünmez */
}
/* 8. background-origin */
/* Görselin nereden başlayacağını belirler */
.background-origin {
background-image: url('https://via.placeholder.com/300'); /* Görsel */
background-origin: padding-box; /* Görsel dolgu alanından başlar */
background-size: cover; /* Görsel tüm alanı kaplar */
padding: 20px; /* Dolgu ekledik */
}
/* 9. background-blend-mode */
/* Arka plan renkleri ve görseller arasındaki karışım modunu belirler */
.background-blend-mode {
background-color: lightblue; /* Renk katmanı */
background-image: url('https://via.placeholder.com/300'); /* Görsel katmanı */
background-blend-mode: multiply; /* Renkler çarpılarak karıştırılır */
}
</style>
</head>
<body>
<div class="box background-color">background-color</div>
<div class="box background-image">background-image</div>
<div class="box background-repeat">background-repeat</div>
<div class="box background-position">background-position</div>
<div class="box background-size">background-size</div>
<div class="box background-attachment">background-attachment</div>
<div class="box background-clip">background-clip</div>
<div class="box background-origin">background-origin</div>
<div class="box background-blend-mode">background-blend-mode</div>
</body>
</html>