Skip to content

Web Sayfasında Arka Plan Filigranı Oluşturmaya Yönelik İpuçları

10 de Mayıs de 2021

Bir web sitesi tasarlıyorsanız, bir web sayfasında nasıl sabit bir arka plan görüntüsü veya filigran oluşturacağınızı öğrenmek ilginizi çekebilir. Bu, bir süredir çevrimiçi olarak popüler olan yaygın bir tasarım işlemidir. Web tasarım çantanızda olması kullanışlı bir efekttir. Bunu daha önce yapmadıysanız veya daha önce şanssız denediyseniz, süreç korkutucu görünebilir, ancak aslında hiç de zor değil. Bu kısa eğitimle, tekniği öğrenmek için ihtiyaç duyduğunuz bilgileri CSS kullanarak dakikalar içinde alacaksınız.

Başlarken

Arka plan resimleri veya filigranlar (gerçekten çok açık renkli arka plan resimleri olan) basılı tasarımda bir geçmişe sahiptir. Belgeler, kopyalanmalarını önlemek için üzerlerine uzun süredir filigranlar eklediler. Ek olarak, birçok el ilanı ve broşür, basılı parçanın tasarımının bir parçası olarak büyük arka plan resimleri kullanır. Web tasarımı, baskıdan uzun süredir ödünç alınan stillere sahiptir ve arka plan resimleri bu ödünç alınan stillerden biridir. Bu büyük arka plan görüntülerinin aşağıdaki üç CSS stil özelliği kullanılarak oluşturulması kolaydır:

  • arka plan görüntüsü
  • arkaplan tekrar
  • arka plan eki
  • arka plan boyutu

Arka plan görüntüsü

Filigranınız olarak kullanılacak görüntüyü tanımlamak için arka plan görüntüsünü kullanacaksınız. Bu stil, sitenizde bulunan bir görüntüyü, büyük olasılıkla adlı dizinde yüklemek için bir dosya yolu kullanır. Görüntüler. arkaplan resmi: url (/images/page-background.jpg);

Görüntünün normal bir görüntüden daha açık veya daha şeffaf olması önemlidir. Bu, yarı saydam bir görüntünün web sayfasının metin, grafik ve diğer ana öğelerinin arkasında olduğu “filigran” görünümünü yaratacaktır. Bu adım olmadan, arka plan resmi sayfanızdaki bilgilerle rekabet edecek ve okumayı zorlaştıracaktır. Arka plan görüntüsünü Adobe Photoshop gibi herhangi bir düzenleme programında ayarlayabilirsiniz.

Arkaplan-Tekrar

Arka planda tekrar özelliği daha sonra gelir. Görüntünüzün filigran stilinde büyük bir grafik olmasını istiyorsanız, görüntünün yalnızca bir kez görüntülenmesini sağlamak için bu özelliği kullanırsınız. arka plan tekrarı: yineleme yok;

Olmadan tekrar yok özellik, varsayılan değer, görüntünün sayfada defalarca yinelenmesidir. Çoğu modern web sayfası tasarımında bu istenmeyen bir durumdur, bu nedenle bu stil CSS’nizde temel olarak düşünülmelidir.

Arka Plan Eklentisi

Arka plan eki, birçok web tasarımcısının unuttuğu bir özelliktir. Bunu kullandığınızda, arka plan resminizin sabit kalmasını sağlar. sabit Emlak. Bu görüntüyü sayfaya sabitlenmiş bir filigrana dönüştüren şeydir. Bu özellik için varsayılan değer şudur: kaydırma. Bir arka plan ek değeri belirtmezseniz, arka plan sayfanın geri kalanıyla birlikte kayar. arka plan eki: sabit;

Arka Plan Boyutu

Arka plan boyutu, daha yeni bir CSS özelliğidir. Bir arka planın boyutunu, görüntülendiği görüntü alanına göre ayarlamanıza olanak tanır. Bu, farklı cihazlarda farklı boyutlarda görüntülenecek duyarlı web siteleri için çok yararlıdır. arka plan boyutu: kapak;

Bu özellik için kullanabileceğiniz iki faydalı değer şunları içerir:

  • Örtmek – Arka planı tam genişlikte veya tam yükseklikte gösterilecek şekilde ölçeklendirir. Bu, görüntünün bazı kısımlarının ekranda görünmeyebileceği, ancak tüm alanın kaplanacağı anlamına gelir.
  • İçeren – Resmi ölçekler, böylece stil uygulanmakta olan alanda hem tüm genişlik hem de yükseklik gösterilir. Görüntü kesilmez, ancak olumsuz tarafı, alanın bazı kısımlarının görüntü tarafından kapatılmamasıdır.

CSS’yi Sayfanıza Ekleme

Yukarıdaki özellikleri ve değerlerini anladıktan sonra bu stilleri web sitenize ekleyebilirsiniz. Tek sayfalık bir site yapıyorsanız, web sayfanızın HEAD’ine aşağıdakileri ekleyin. Çok sayfalı bir site oluşturuyorsanız ve harici bir sayfanın gücünden yararlanmak istiyorsanız, bunu harici bir stil sayfasının CSS stillerine ekleyin. Arka plan resminizin URL’sini sitenizle ilgili belirli dosya adı ve dosya yolu ile eşleşecek şekilde değiştirin. Tasarımınıza uyacak diğer uygun değişiklikleri yapın ve bir filigranınız olacak.

Sen de Pozisyon Belirleyebilirsin

Filigranı web sayfanızda belirli bir yere yerleştirmek istiyorsanız, bunu da yapabilirsiniz. Örneğin, filigranı varsayılan olan üst köşenin aksine sayfanın ortasında veya belki de alt köşesinde isteyebilirsiniz. Bunu yapmak için, arka plan konumu özelliğini stilinize ekleyin. Bu, görüntüyü tam olarak görünmesini istediğiniz noktaya yerleştirecektir. Bu konumlandırma efektini elde etmek için piksel değerlerini, yüzdelerini veya hizalamaları kullanabilirsiniz. arka plan konumu: merkez;