CSS Background Image Kullanımı

Kod HocasıGeliştirici

Css #background #image #css #bgimage

CSS (Cascading Style Sheets), bir web sayfasının görünümünü kontrol etmek için kullanılan güçlü bir araçtır. CSS'in en yaygın kullanım alanlarından biri, arka plan resimlerini web sayfalarına eklemektir.

CSS ile bir arka plan resmi eklemek oldukça basittir.

div {
    background-image: url('path/to/your/image.jpg');
}

Belirtilen URL'deki resmi body etiketinin arka planı olarak ayarlar. Ancak, bu sadece başlangıç noktasıdır. Arka plan resimleriyle daha fazlasını yapmak mümkündür.
 

Arka Plan Tekrarlama

Varsayılan olarak, bir arka plan resmi yatay ve dikey olarak tekrar eder. Bu davranışı değiştirmek için background-repeat özelliğini kullanabilirsiniz.

div {
    background-image: url('path/to/your/image.jpg');
    background-repeat: no-repeat;
}

Arka plan resminin tekrarlanmamasını sağlar. İşte diğer background-repeat değerleri

• repeat-x: Resmi yatay olarak tekrarlar.
• repeat-y: Resmi dikey olarak tekrarlar.
• repeat: Resmi hem yatay hem de dikey olarak tekrarlar (varsayılan).
• space: Resimler arasında boşluk bırakır ve boşluğu eşit dağıtır.
• round: Resmin boyutunu değiştirerek sığdırır ve tekrarlar.

Arka Plan Konumu

Arka plan resmini belirli bir konuma yerleştirmek için background-position özelliğini kullanabilirsiniz.

div {
    background-image: url('path/to/your/image.jpg');
    background-repeat: no-repeat;
    background-position: center;
}

Yaygın kullanılan konum değerleri şunlardır

• top, bottom, left, right, center
• Yüzde veya piksel değerleri, örneğin 50% 50% veya 100px 200px

Arka Plan Boyutu

Arka plan resminin boyutunu ayarlamak için background-size özelliğini kullanabilirsiniz

div {
    background-image: url('path/to/your/image.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

background-size için yaygın değerler

• auto: Varsayılan boyut.
• cover: Resmi, tüm alanı kaplayacak şekilde ölçeklendirir (en boy oranını koruyarak).
• contain: Resmi, alanın içine sığacak şekilde ölçeklendirir (en boy oranını koruyarak).
• Piksel veya yüzde değerleri, örneğin 100px 200px veya 50% 50%.

Birden Fazla Arka Plan Resmi

Birden fazla arka plan resmi kullanmak mümkündür. Resimleri virgülle ayırarak belirtebilirsiniz

div {
    background-image: url('image1.jpg'), url('image2.jpg');
    background-repeat: no-repeat, repeat;
    background-position: left top, right bottom;
    background-size: auto, cover;
}

Her arka plan resmi için ilgili özellikleri aynı sırayla belirtebilirsiniz ve diğer arka plan özellikleri

• background-attachment: Arka plan resminin kaydırma davranışını kontrol eder. Değerleri scroll (varsayılan) ve fixed'dir.
• background-clip: Arka planın hangi kutunun içine çizileceğini belirler. Değerleri border-box, padding-box, content-box'dır.
• background-origin: Arka plan konumlandırma bölgesini belirler. Değerleri border-box, padding-box, content-box'dır.

Tüm Arka Plan Özelliklerini Bir Arada Kullanma

Tüm arka plan özelliklerini tek bir bildirimde birleştirebilirsiniz

div {
    background: url('path/to/your/image.jpg') no-repeat center/cover fixed;
}

Sırasıyla background-image, background-repeat, background-position, background-size ve background-attachment özelliklerini ayarlar.