CSS ile Arka Plan Resmi Kullanım

Written by | 01 September 2017 | Published in Submitted articles bucket
CSS background-image (arka plan resmi) özelliği, bir öğe için bir veya daha fazla arka plan görüntüsü ayarlar. Arka plan boyut (background-size) CSS özelliği ise arka plan resimlerinin boyutunu belirtir. Özgün oranını korumak için resmin boyutu tamamen kısıtlanabilir veya site tasarımına göre özelleştirebilirsiniz.

Temel CSS

Bir görüntüyü bir alan içinde arka plan olarak görüntülemek için, bu örnek CSS'ye ihtiyacınız vardır:

.container-class {
    background-image: url(images/image.jpg);
    background-repeat: no-repeat;
    background-position: center;
    width: 400px;
    height: 400px;
    border: 2px dashed #333;
}
  • .container sınıfını, hedeflemek istediğiniz seçici ile değiştirin.
  • border ve background-position özellikleri isteğe bağlıdır. Bunları aşağıda gösterilen farklı sonuçları sergilemek için kullanıyoruz.

Resim için belirli bir boyut tanımlamak için, background-size özelliği eksik. Bir sonraki adımda bunun hakkında konuşalım.

Örnek #1. Tam genişlikte arka plan, ancak yükseklik tam değil

Arka plan resmini tam genişliğe getirmek için aşağıdaki söz dizimini ekleyin:

background-size: 100% auto;

Bu örnekte, görüntünün yalnızca genişliği kapsadığını ancak yüksekliği kapsamadığını görebilirsiniz.

1

Örnek #2. Tam yükseklikte arka plan, ancak tam genişlik yok

Arka plan resmini tam yüksekliğe getirmek için aşağıdaki söz dizimini ekleyin:

background-size: auto 100%;

Bu örnekte, görüntünün yalnızca genişliği değil, yüksekliği nasıl kapsadığını görebilirsiniz.

2

Örnek #3. Tam arka plan

Arka plan resminin tümünü kapsaması için bu sözdizimini ekleyin. Bu, resmin en boy oranına bakılmaksızın tam kapsamasının otomatik bir yoludur:

background-size: cover;

Bu örnekte, dikkat ederseniz görüntünün tümünü kapsadığını göreceksiniz.

3

Arka plan boyutu değerlerinin listesi

Arka plan boyutu (background-size) değerlerinin tam listesi:

  • auto - Varsayılan değer.
  • length - Örnek olarak: 100% auto veya 400px auto. İlk değer genişlik, ikinci yüksekliktir.
  • cover - Komple alanı kapsar.
  • contain - Resmi, hem genişliği hem de yüksekliği içerik alanının içine sığacak şekilde en büyük boyuta ölçeklendirir.
  • initial - Bu özelliği varsayılan değerine ayarlar.
  • inherit - anahtar sözcüğü, bir özellik değerini üst öğesinden devralması gerektiğini belirtir.
Read 835 times Tagged under Turkish, International Stories, Designers