Tema dosyalarını yönetme eğitim videomuzda göreceğiniz gibi, değiştirmek istediğiniz parametreyi bulup mevcut resim dosyası ile aynı uzantıda, aynı genişlik ve yükseklikte kendi hazırladığınız resmi yükleyip, mevcut olan ile değiştiriyorsunuz.
Temanızın düzenleme sayfasında bulunan CSS kodları içinde kullanılan resim dosyalarını kolayca değiştirebilirsiniz.
CSS, temel belge metin stili, animasyon ve web geliştirme gibi görevler için kullanabileceğimiz önemli bir dildir. Web sayfalarımızı değiştirmek ve özelleştirmek için kullanabileceğimiz birçok farklı CSS özelliği vardır. CSS arka planı bu özelliklerden biridir. Arka plan renklerimizi, resimlerimizi, boyutlarımızı ve çok daha fazlasını ayarlamak için CSS arka plan özelliğini kullanabiliriz. Bugün, bu yararlı CSS özelliğini tartışacağız ve onunla yapabileceğimiz tüm farklı şeyleri keşfedeceğiz.
Şunları ele alacağız:
CSS background, bir CSS kısayol özelliğidir. Birden fazla CSS özelliğinin değerlerini aynı anda ayarlamak için kısayol özelliklerini kullanabiliriz. Bu, okunabilir kodu daha hızlı ve verimli yazabileceğimiz anlamına gelir. Bir ögenin arka planını değiştirmek için arka plan özelliklerini kullanabiliriz.
CSS arka planı, aşağıdakiler gibi birçok arka plan özelliğini değiştirmemize izin verir:
Farklı ögeler için arka plan resimleri (dosyaları) ayarlamak üzere background-image özelliğini kullanabiliriz. Modern tarayıcılar JPG, PNG, IMG, GIF ve SVG gibi çeşitli resim dosyası türlerini destekler. Ayrıca, resmimizin yüklenememesi veya tarayıcımızın resim dosyası türümüzü desteklememesi durumunda gösterilecek renk olan bir geri dönüş rengi de ayarlayabiliriz.
Bir sayfa için arka plan resmi ayarlamak için aşağıdaki kodu kullanabiliriz:
background-image: url("resim.jpg");
Varsayılan olarak, görüntü tüm ögeyi kaplayacak şekilde tekrarlanır. İstersek birden fazla arka plan resmi de kullanabiliriz. Bu biraz daha fazla çalışma gerektiriyor çünkü her şeyin olmasını istediğimiz yerde olduğundan emin olmak için daha fazla değer belirlememiz gerekecek.
Ayrıca görüntüleri tam olarak görünmelerini istediğimiz sırayla kodladığımızdan emin olmalıyız, yani önde olmasını istediğimiz görüntü ilk sırada ve arkada olmasını istediğimiz görüntü sonda olmalıdır. Kod, tek bir arka plan görüntüsü için göründüğü gibi görünür, ancak görüntü dosyası adları virgülle ayrılmıştır.
Bir geri dönüş rengi ayarlamak istiyorsak, aşağıdaki kodu kullanabiliriz:
background: url(sampleimage.jpg) blue;
background-color özelliği, ögelere arka plan olarak düz renkler uygulamamızı sağlar. Arka plan renginin özelliklerini kontrol etmek için kullanabileceğimiz farklı özellik değerleri vardır. Bu değerler şunları içerir:
background-color: green;
Arka plan rengimizin opaklığını ayarlamak için 0.0 ile 1.0 arasında bir sayı da kullanabiliriz. Sayı ne kadar düşükse, renk o kadar şeffaftır. Bir örneğe bakalım:
background-color: red;
opacity: 0.3;
background-size özelliği, bir arka plan görüntüsünün boyutunu belirlememizi sağlar.
background: url("resim.jpg");
background-repeat: no-repeat;
background-size: auto;
background-position özelliği, bir arka plan görüntüsünün başlangıç konumunu belirlememizi sağlar. Arka plan resimleri varsayılan olarak bir ögenin sol üst köşesine konur. Bu özellik, arka plan resimlerimizin nasıl konumlandırıldığını kontrol etmemize izin veren farklı özellik değerlerine sahiptir. Bu değerler şunları içerir:
body {
background-image: url("resim.jpg");
background-size: 300px 100px;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
}
background-repeat özelliği, arka plan görüntülerinin tekrarlanıp tekrarlanmayacağını ve nasıl tekrarlanacağını belirlememize izin verir. Arka plan resimleri varsayılan olarak dikey ve yatay olarak tekrarlanır. Bu özellik, arka plan resimlerimizin nasıl sunulacağını kontrol etmemize izin veren birçok farklı özellik değerine sahiptir. Değerlere ve ne yaptıklarına bir göz atalım:
body {
background-image: url("resim.jpg");
background-size: 300px 100px;
background-repeat: repeat-y;
}
Arka plan resimlerimizin sabitlenmesini mi yoksa kaydırdığımızda sayfanın geri kalanıyla birlikte hareket etmesini mi istediğimizi belirtmek için background-attachment özelliğini kullanabiliriz. Bu özellik, arka plan resimlerimizi nasıl ekleyeceğimizi kontrol etmemize izin veren farklı özellik değerlerine sahiptir. Bu değerler şunları içerir:
body {
background-image: url("resim.jpg");
background-size: 300px 100px;
background-repeat: no-repeat;
background-attachment: fixed;
}
CSS arka plan gradyan özellikleri, iki veya daha fazla renk arasında bir gradyan efekti oluşturmamızı sağlar. Degradeler şeffaflığı destekler, böylece degrademizle solma efektleri oluşturabiliriz. İki tür gradyan vardır: doğrusal gradyanlar ve radyal gradyanlar.
linear-gradient özelliği ile yukarıdan aşağıya, soldan sağa ve çapraz olarak giden lineer gradyanlar oluşturabiliriz. Birlikte geçiş yapmak istediğimiz renkler olan en az iki renk durağı tanımlamalıyız. İstersek birden çok renk durağı tanımlayabilir ve gradyanları tekrarlayabiliriz.
İki renkle yukarıdan aşağıya uzanan temel bir doğrusal degradeye bir göz atalım:
height: 200px;
background-color: green; /* gradyan desteklemeyen tarayıcılar için */
background-image: linear-gradient(green, blue);
Radial-gradient özelliği ile merkezi tarafından tanımlanan bir degrade oluşturabiliriz. Radyal degradelerin varsayılan şekli bir elipstir, ancak daireye dönüştürülebilir. Radyal degradelerle en az iki renk durağı tanımlamalıyız, ancak istersek birden fazla renk durağı tanımlayabiliriz. Doğrusal gradyanlara benzer şekilde, radyal gradyanları da tekrarlayabiliriz.
Üç renkli temel bir radyal degradeye bir göz atalım:
background-color: green; /* gradyan desteklemeyen tarayıcılar için */
background-image: radial-gradient(green, blue, purple);
interAnaliz Yazılım Ltd. Şti. Tescilli Markasıdır.
©2014 / 2023
Her hakkı saklıdır.