Bir Web Sitesinde Arka Plan Olarak İki Renk Nasıl Kullanılır

Özelleştirilmeden bir Web sayfasının arka plan rengi beyazdır. HTML Web programlama dili, arka plan rengini değiştirmenin yanı sıra bir arka plan görüntüsü eklemenizi de sağlar. Birden çok renk içeren bir arka plan görüntülemek için görüntü kullanabilirsiniz. İşletme logonuzdaki gibi, istediğiniz iki rengi görüntüleyen mevcut bir resmi kullanın veya bir grafik düzenleyici kullanarak bir tane oluşturun. Yinelenen ince bir yatay görüntü kullanarak Web sayfanız için iki renkli arka plan oluşturabilirsiniz. Değişiklikleri site genelinde yapmak için Basamaklı Stil Sayfalarını kullanın.

1.

CSS arka plan stilinizi tutacak harici stil sayfasını oluşturmak için bir HTML veya metin düzenleyici açın.

2.

Gövde etiketinde arka plan için bir stil tanımı yazın. Stil tanımları "{}" etiketini alır, bu yüzden body etiketi için bir tanım "body {}" olur. CSS, stilinizi tanımlamanızı sağlayan çeşitli parametreler sunar. "Background-image" özelliği, arka planınız için bir görüntü belirtmenizi sağlar. “Url” parametresindeki görüntü için bir bağlantı ekleyin. Örneğin, kod şöyle görünebilir:

vücut {background-image: url (görüntüler / 2colors.jpg); }

3.

Arka plana "arka plan tekrarı" özelliğini kullanarak dikey olarak - "tekrarla-y" - veya yatay olarak - "tekrarla - x" - tekrarlamasını söyleyen bir değer yazın. Bu özellik, resminizin tekrarlanma biçimini özelleştirmek için parametreleri ayarlamanızı sağlar. Vücut stili şuna benzer:

vücut {background-image: url (görüntüler / 2colors.jpg); Arka plan-tekrar: tekrar-y; }

4.

Dosyayı ".css" uzantısını kullanarak, örneğin pagestyles.css dosyasını kaydedin.

5.

Arka plan stilini uygulamak istediğiniz bir Web sayfasını açın. Dış belgelere bağlantılar, Web sayfanızın “” etiket kümesinde ayarlanır. “” Etiketini bulun ve stil sayfasına erişim sağlamak için aşağıdaki metni üstüne yerleştirin:

6.

Resim arka planını kullanmak istediğiniz web sitenizin her sayfasında bağlantı kodunu tekrarlayın. Sayfayı Web tarayıcısına yükleyerek yaptığınız değişikliklerin sonucunu test edin.

Popüler Mesajlar