Bir Web Sitesine Arka Plan Resmi Ekleme: Adım Adım Eğitim.

Bu kullanıcı dostu kılavuzla bir web sayfasına sabit veya döşenmiş bir arka plan resmi ekleyin

Web sitenize arka plan resmi eklemenin en iyi yolunu öğrenmek ister misiniz? Sayfanızın arka planı olarak resim eklemek, web sitenizin diğer alanlarına resim eklemekten biraz farklıdır. Düz HTML kodu kullanmak yerine CSS (Basamaklı Stil Sayfaları) kullanmanız gerekecektir. Neyse ki web sitenize bir arka plan resmi ayarlamak kolaydır. Bu wikiHow makalesi, basit örnekler kullanarak HTML ve CSS kullanarak web sayfanızın arka planını ayarlama konusunda size yol gösterecektir. Ayrıca arka plan resminizi yeniden boyutlandırmak ve hizalamak için size daha gelişmiş ipuçları ve püf noktaları da vereceğiz.

Bilmeniz Gerekenler

• CSS özelliğini kullanın: arka plan görüntüsü: url("my_background.png"); arka plan resminizi ayarlamak için.
• "my_background.png" yerine görüntünüzün konumunu kullanın; bu ister tam URL ister web sunucunuzdaki ilgili yol olsun.
• arka plan görüntüsünün, arka plan tekrarı: norepeat; özelliklerini kullanarak sayfayı kaplamasını sağlayın. ve arka plan boyutu: cover;.

Adımlar

Web Sayfası Arka Planı Ayarlama

1. 

   HTML belgenizi açın. HTML dosyanızı düzenlemek için Notepad++ veya TextEdit gibi herhangi bir metin düzenleyiciyi kullanabilirsiniz.
   • Henüz web sayfanızı oluşturmadıysanız HTML'de basit bir web sitesi oluşturma kılavuzumuza göz atın.
   • İsterseniz CSS kodunuzu HTML belgenizden ayrı bir dosyaya da ekleyebilirsiniz. Bu, CSS kodunuz için bir style.css dosyası oluşturmayı ve etiketi kullanarak onu HTML belgenize bağlamayı içerir. Bu kılavuzu CSS'yi doğrudan HTML dosyanıza eklemeye odaklayacağız, ancak ayrı stil sayfalarının nasıl oluşturulacağını öğrenmek için CSS Nasıl Oluşturulur konusuna göz atın.

2. 

   CSS'nizin sonuna yazın. Bu satırı etiketin önüne ekleyin. Bu etiket CSS'nizi kapatır.

3. 

   HTML dosyasını kaydedin. Her şeyi tamamladığınızda, çalışmanızı kaydetmek için Dosya'ya ve ardından Kaydet'e tıklayın. HTML belgenizin tamamı şöyle görünmelidir:
   Sayfa başlığı

Arka Plan Püf Noktaları ve Örnekler

1. 

   Herhangi bir HTML etiketine arka plan resmi ekleyin. Arka plan resimleri paragraflar, başlıklar ve daha fazlası dahil olmak üzere herhangi bir HTML öğesi için ayarlanabilir. Bu örnekte, için bir arka plan resmi ayarlayacağız.

   Bu, paragraf etiketlerindeki tüm içeriğin arka plan resmini devralmasını sağlar. CSS dosyanıza veya HTML belgenizin bir bölümüne, arka plan görüntüsü vermek istediğiniz öğe için yeni bir CSS seçici ekleyin. Bu örnekte metnin arkasına, paragrafın ortasına küçük bir arka plan resmi ekleyeceğiz:

   etiket:

2. 

   Arka plan resimlerini yeniden boyutlandırmak için arka plan boyutu özelliğini kullanın. Arka planınızın boyutunu değiştirmek için CSS'yi üç şekilde kullanabilirsiniz: cover veya include anahtar kelimelerini kullanarak, yalnızca bir genişlik değeri belirterek veya genişlik ve yükseklik değerlerini birlikte belirterek.
   • arka plan boyutu: kapak; Arka plan görüntüsünü, görüntüyü genişletmeden veya daraltmadan kabın tamamını kaplayacak şekilde ölçeklendirir. Kap, web sayfasının tamamı veya başka herhangi bir öğe olabilir. Bu en çok, bir web sayfasının tamamı için arka plan resmi ayarlarken görülür.
   • arka plan boyutu: içerme;: Bu seçenek, görüntüyü kaba sığacak şekilde daha küçük bir boyuta ölçeklendirir. Bu seçenek, arka plan resminiz onu kullandığınız kaptan çok daha büyükse kullanışlıdır. Resim daha küçükse döşenir.
   • arka plan boyutu: arka plan boyutu: 150 piksel 200 piksel;: Bu seçenek, arka plan resmini 150 piksel genişliğinde ve 200 piksel yüksekliğinde yapar. İlk ölçüm genişlik, ikincisi ise yüksekliktir. Ancak uzunluk isteğe bağlıdır; yalnızca genişliği girerseniz yükseklik, esnemeden veya bükülmeden otomatik olarak ölçeklenir.
     • Ayrıca uzunluk ve genişliği yüzde olarak da belirtebilirsiniz.

3. 

   Bir arka planı hizalamak için arka plan konumu özelliğini kullanın. Bu özellik, arka plan resminizi, sayfa (gövde etiketinde kullanılıyorsa) veya başka herhangi bir kapsayıcı olabilecek kapsayıcıya göre konumlandırmanıza yardımcı olacaktır. Arka plan konumu için iki değer belirleyebilirsiniz; ilki her zaman yatay değerdir. Dikey bir değer belirtmezseniz varsayılan değer her zaman %50 olacaktır. Bazı örnekler:
   • arka plan konumu: merkez;: Arka plan resmini ortalar.
   • arka plan konumu: top;: Öğenin üst kısmına hizalar.
   • arka plan konumu: alt;: Öğenin alt kısmına hizalar.
   • arka plan konumu: sol;: Öğenin sol tarafına hizalar.
   • arka plan konumu: sağ;: Öğenin sağ tarafına hizalar.
   • arka plan konumu: sağ üst;: Öğenin sağ tarafına ve üstüne hizalar.
   • arka plan konumu: orta alt;: Öğenin ortasına ve altına hizalar.
   • arka plan konumu: üst 20 piksel sağ 10 piksel;: 20 piksellik bir uzaklıkla üste ve 10 piksellik bir uzaklıkla sağa hizalar. Pikselleri yüzde olarak da belirtebilirsiniz.
   • arka plan konumu: %20 %60;: Arka planı sol taraftan yatay olarak %20 ve üstten %60 dikey olarak konumlandırır.

4. 

   Bir arka plan rengi ayarlayın. Sayfanıza bir arka plan resmi ekliyor olsanız bile, bir arka plan rengi de ayarlamak her zaman iyi bir fikirdir. Arka plan resmi yüklenmezse kullanıcı seçtiğiniz arka plan rengini görecektir. Bunu yapmak için, arka plan rengini ekleyin: #FF33F0; ve FF33F0'ı tercih ettiğiniz HTML renk onaltılı koduyla değiştirin.

Video