Arka Plan Boyutu, Konumu ve Tekrarı
bg-cover, bg-contain, bg-center ve bg-no-repeat yardımcı sınıflarını kullanarak arka plan görsellerinin nasıl görüntüleneceğini denetleyin.
Arka Plan Boyutu, Konumu ve Tekrarı, CoddyKit'te ücretsiz bir Tailwind CSS Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Tailwind CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Tailwind CSS Academy kursu toplamda 4 dersten oluşur.
Tailwind'de Arka Plan Görselleri
Tailwind arka plan görsellerini doğrudan uygulamaz (görsel URL'leri yardımcı sınıf adları olarak ifade edilemediği için); ancak arka plan görsellerinin davranış biçimi üzerinde tam denetim sağlar: boyutları, konumları ve yineleme davranışları. Görseli genellikle satır içi bir stil veya özel bir CSS sınıfı aracılığıyla ayarlar, ardından görüntüleme özelliklerini denetlemek için Tailwind yardımcı sınıflarını kullanırsınız.
<div
style="background-image: url('hero.jpg');"
class="w-full h-64 bg-cover bg-center bg-no-repeat">
</div>bg-cover ve bg-contain Karşılaştırması
bg-cover ve bg-contain, en önemli iki arka plan boyutu yardımcı sınıfıdır. bg-cover, görseli mümkün olduğunca büyüterek öğeyi tamamen kaplamasını sağlar; gerekirse görsel kırpılır. Bu nedenle kahraman görselleri ve tam genişlikteki arka planlar için idealdir. bg-contain ise görseli kırpmadan öğenin içine tamamen sığacak şekilde ölçeklendirir; arka plan olarak kullanılan logolar ve simgeler için idealdir.
<!-- Full-bleed hero: bg-cover -->
<div style="background-image: url('hero.jpg');" class="h-96 bg-cover bg-center">
<!-- Image fills the entire div, may be cropped -->
</div>
<!-- Logo background: bg-contain -->
<div style="background-image: url('logo.svg');" class="h-32 w-32 bg-contain bg-center bg-no-repeat">
<!-- Image fits inside without cropping -->
</div>bg-auto ve Özel Boyutlar
bg-auto, arka plan görselini doğal piksel boyutunda, yani ölçeklendirme yapmadan oluşturur. Hassas, ölçeklendirilmemiş bir doku veya desen istediğinizde kullanışlıdır. cover ya da contain olmayan özel boyutlar için rastgele değerler kullanın: bg-[length:50%_auto], arka plan boyutunun genişliğini %50 ve yüksekliğini auto olarak ayarlar; bu, yarım genişlikteki arka plan desenleri için kullanışlıdır.
<!-- Pattern tile at natural size -->
<div style="background-image: url('pattern.png');" class="h-64 bg-auto bg-repeat">
</div>
<!-- Custom background size via arbitrary value -->
<div style="background-image: url('texture.jpg');" class="h-64 bg-[length:200px_200px] bg-repeat">
</div>Arka Plan Konumu Yardımcı Sınıfları
Arka plan konumu, görselin kapsayıcısı içinde nereye sabitleneceğini belirler. Tailwind, 3x3 ızgaraya karşılık gelen dokuz konum sunar: bg-top, bg-bottom, bg-left, bg-right, bg-center ve dört köşe için bg-top-left, bg-top-right, bg-bottom-left, bg-bottom-right. bg-cover ile birlikte kullanıldığında konum, kırpma gerçekleştiğinde görselin hangi bölümünün görüneceğini belirler.
<!-- Show the top of the image (portrait person photo) -->
<div style="background-image: url('person.jpg');" class="h-48 bg-cover bg-top"></div>
<!-- Show the center (landscape scenery) -->
<div style="background-image: url('landscape.jpg');" class="h-48 bg-cover bg-center"></div>
<!-- Show the bottom (ground-level details) -->
<div style="background-image: url('detail.jpg');" class="h-48 bg-cover bg-bottom"></div>Rastgele Arka Plan Konumu
Dokuz hazır konumun kapsamadığı konumlar için rastgele değerler kullanın: bg-[center_25%], görseli yatay olarak ortaya ve üstten %25 aşağıya sabitler. Bu, kırpılmış bir kart görselinde bir özne (örneğin ekip fotoğrafındaki bir yüz) dikkatlice konumlandırılırken kullanışlıdır. Hassas konumlar kullanırken görselin farklı görünüm alanı boyutlarında nasıl göründüğünü her zaman test edin.
<!-- Team member card: position face in frame -->
<div
style="background-image: url('team-member.jpg');"
class="w-32 h-32 rounded-full bg-cover bg-[center_20%]">
</div>Arka Plan Tekrarı Yardımcı Sınıfları
Arka plan tekrarı, görselin kapsayıcıyı dolduracak şekilde döşenip döşenmeyeceğini belirler. bg-repeat, görseli her iki yönde döşer (varsayılan davranış). bg-no-repeat, görseli yalnızca bir kez gösterir. bg-repeat-x, görseli yalnızca yatay olarak; bg-repeat-y ise yalnızca dikey olarak döşer. bg-repeat-round ve bg-repeat-space, kenarlardaki döşemelerin kesilmesini önleyen gelişmiş döşeme seçenekleri sunar.
<!-- Tiled pattern background -->
<div style="background-image: url('dots.png');" class="h-64 bg-repeat">
</div>
<!-- Single decorative image in corner -->
<div style="background-image: url('corner-decor.svg');" class="h-64 bg-no-repeat bg-bottom-right">
Main content here
</div>Arka Plan Sabitlemesi: Sabit Paralaks
bg-fixed, arka plan görselini öğeye göre değil, görünüm alanına göre sabitler. Kullanıcı kaydırdıkça içerik hareket eder, ancak arka plan sabit kalır ve paralaks efekti oluşturur. bg-local, arka planın öğenin içeriğiyle birlikte kaymasını sağlar. bg-scroll (varsayılan), arka planı öğeyle birlikte, ancak içerikle birlikte olmayacak şekilde kaydırır.
<!-- Parallax section -->
<div
style="background-image: url('mountain.jpg');"
class="h-96 bg-fixed bg-cover bg-center">
<div class="h-full flex items-center justify-center">
<h2 class="text-4xl font-bold text-white drop-shadow-lg">Parallax Hero</h2>
</div>
</div>Duyarlı Arka Plan Davranışı
Arka plan davranışının farklı ekran boyutlarında değişmesi çoğu zaman gerekir. Mobilde bir görselin farklı biçimde ortalanması veya daha küçük bir alandan kırpılması daha uygun olabilir. Herhangi bir arka plan yardımcı sınıfına duyarlı ön ekler uygulayın: bg-top md:bg-center, görseli masaüstünde ortalar, ancak mobilde üst bölümünü gösterir. Bu, arka plan görsellerinin her görünüm alanı genişliğinde doğru odak noktasını korumak için önemlidir.
<div
style="background-image: url('hero.jpg');"
class="h-64 md:h-96 bg-cover bg-top md:bg-center">
</div>Tam Sayfa Arka Planı Oluşturma
Tam sayfa arka plan görseli, görünüm alanını dolduran bir kapsayıcıya görsel eklenerek oluşturulur: yükseklik için min-h-screen, görsel davranışı için bg-cover bg-center bg-no-repeat bg-fixed kullanın. İçeriğin arka planın üzerinde katmanlanması için içine bir relative kapsayıcı ekleyin. Metnin görsel üzerinde okunabilir kalmasını sağlamak için her zaman yarı saydam bir kaplama katmanı ekleyin.
<div
style="background-image: url('bg.jpg');"
class="min-h-screen bg-cover bg-center bg-no-repeat relative">
<!-- Dark overlay for text contrast -->
<div class="absolute inset-0 bg-black/40"></div>
<!-- Content above overlay -->
<div class="relative z-10 flex items-center justify-center min-h-screen">
<h1 class="text-5xl font-bold text-white">Welcome</h1>
</div>
</div>img Üzerinde object-fit ve Arka Plan Karşılaştırması
Mümkün olduğunda arka plan görselleri yerine <img> etiketiyle birlikte object-cover ve object-position kullanın. Bu yaklaşım erişilebilirlik (alt metni), SEO (dizine eklenebilen görseller) ve performans (tarayıcının yerel tembel yükleme özelliği) açısından daha iyidir. Arka plan görsellerini dekoratif desenler, dokular ve görselin anlamsal bir anlam taşımadığı durumlar için kullanın.
<!-- Prefer img with object-fit for content images -->
<div class="relative h-64 overflow-hidden rounded-xl">
<img
src="hero.jpg"
alt="Mountain landscape at sunrise"
class="absolute inset-0 w-full h-full object-cover object-center"
loading="lazy"
/>
</div>Tailwind Arka Plan Kısa Yazımı Özeti
Arka plan yardımcı sınıfı aileleri için hızlı bir başvuru: boyut için bg-cover / bg-contain / bg-auto, konum için bg-center / bg-top / bg-bottom / bg-left / bg-right, döşeme için bg-no-repeat / bg-repeat / bg-repeat-x / bg-repeat-y ve sabitleme için bg-fixed / bg-local / bg-scroll. Çoğu kahraman bölümü, güvenilir bir başlangıç noktası olarak bg-cover bg-center bg-no-repeat kullanır.
Hızlı Kontrol
Bu dersteki Tailwind CSS Mastery kavramlarını anlayıp anlamadığınızı test edin.
Ders Özeti
Bu derste şunları öğrendiniz: bg-cover, kapsayıcıyı dolduracak şekilde ölçeklendirirken bg-contain görseli kırpmadan içine sığdırır, bg-center / bg-top / bg-bottom, görselin çerçevede hangi bölümünün sabitleneceğini belirler ve bg-fixed paralaks efekti oluştururken bg-no-repeat döşemeyi önler. Sırada, kenar boşluğu ve iç boşluk için Tailwind'in aralık ölçeğini öğreniyoruz.
Yapay zeka eğitmeniyle HTML öğren — ücretsiz
Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.
- Kurslar
- 30
- Dersler
- 120
Sıkça Sorulan Sorular
“Arka Plan Boyutu, Konumu ve Tekrarı” dersi ücretsiz mi?
Evet — “Arka Plan Boyutu, Konumu ve Tekrarı” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Tailwind CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Tailwind CSS Academy kursu toplamda 4 dersten oluşur.
“Arka Plan Boyutu, Konumu ve Tekrarı” dersinde ne öğreneceğim?
bg-cover, bg-contain, bg-center ve bg-no-repeat yardımcı sınıflarını kullanarak arka plan görsellerinin nasıl görüntüleneceğini denetleyin. Tailwind CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Tailwind CSS Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Tailwind CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.
“Arka Plan Boyutu, Konumu ve Tekrarı” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Tailwind CSS Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Tailwind CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Tailwind'in Renk Paleti
- Arka Plan Degradeleri
- Saydamlık ve Renk Değiştiricileri
- Arka Plan Boyutu, Konumu ve Tekrarı