CSS’te Background – Background Image - IRCForumları - IRC ve mIRC Kullanıcılarının Buluşma Noktası

28 Eylül 2014, 00:43

[Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]

Merhaba arkadaşlar, bu makalemde CSS ile birlikte arkaplanı nasıl şekillendireceğimizi inceleyeceğiz.Eğer HTML hakkında bir bilginiz yoksa daha önce yazmış olduğum "[Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]" adlı makalemi okumanızı tavsiye ederim.

Background özelliklerini tanıyarak örneklerimize başlayalım.

Arka Plan Rengi(bgcolor)

bgcolor özelliği ile web sitemizin arka plan rengini değiştirebiliriz. <body> etiketi içerisine yazılır ve renk kodları ile çalışır.

Örnek :

<html>
<body bgcolor="#000">
</body>
</html>

Şuanda "#000" olarak kullandığım renk kodunun rengi siyahtır.Eğer başka bir renk kodunu kullanmak istiyorsanız [Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]bakabilirsiniz.Bir diğer yöntem ise İngilizce olarak renklerin adlarını , renk kodlarını yazdığımız kısma yazarsak arka plan rengimiz değişecektir.

Örnek:

<body bgcolor="gold">
Red,yellow,black,white,green gibi bir çok rengi İngilizce olarak yazarsanız arkaplan renginiz değişecektir.

Arka Plan Resmi Oluşturma(background)

Arka plan renginden sonra bir diğer seçenek ise background'dır. Bu özellik ile arka planınıza herhangi bir resmi eklemek için kullanabilirsiniz.Kullanımı gayet basittir.Öncelikle arkaplana koyulacak olan bir tane resim seçmelisiniz.Bu resmi index.html dosyanızın bulunduğu klasör yada alt klasörlerde tutabilirsiniz.Eğer resminiz internet üzerinden bir link ile getirilecekse doğru url ile background yapabilirsiniz.Farklı kullanım şekilleri ile aynı işlemi yapabiliriz.Birinci olarak <body> etiketi içerisine şu şekilde yazabiliriz;

<body background="
Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir.
klasördeki resmi kullanma)
<body background="
Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir.
bir resim kullanma)

Örnekte görüldüğü gibi "images" klasörünün içinde "image.png" adlı resmi seçtiğimizi görüyoruz.İkinci olarak CSS ile kullanımı,bu kullanımı tavsiye ederim,daha ilerleyen durumlarda CSS olarak kullanacağınız bir çok stil olacak ve aynı zamanda bu stillerinizi ayrı bir dosyada .css uzantısı ile tutacaksınız.Diğer bir makalemde CSS'te harici ve dahili stil oluşturmayı ayrıntılı olarak işleyeceğiz.Kullanımı ise ;<head></head> etiketleri içerisine <style></style> adlı bir diğer etiket oluşturarak CSS kodlarınızı dahili olarak şu şekilde kullanabiliriz;

<html>
<head>
<style>
body {
background-image:url("image.png");
}
</style>
</head>
<body>
</body>
</html>
Burdaki kodlarımız ile dahili bir CSS oluşturduk.Aynı işlemi yaptık fakat bu yöntem daha kullanışlıdır.

Tekrarlama(repeat)

Bu özellik ile arka plan resminin tekrar edip etmeyeceğini , edecekse x'mi yoksa y ekseninde mi tekrar edeceğini belirleriz.Bu özelliğimizi ,CSS stilimizin yani <head> </head> etiketleri içerisinde olan <style></style> etiketleri içerisine ekleyeceğiz.Özellikle altını çizmek isterim ki background özelliği olduğu için "background-image" özelliğini önceden kullanmanız gerekmektedir.Yani eğer arka plana bir resim koymazsanız tekrar edip etmemesinin bir önemi yoktur.Kullanımına gerek yoktur.Kullanımı şu şekildedir;<style> </style> etiketleri içersine aşağıdaki kodlardan dilediğinizi ekleyin,

background-repeat:repeat;(Hem yan olarak hem de alta doğru tekrar et)
background-repeat:repeat-x ;(Yana doğru hareket et)
background-repeat:repeat-y;(Aşağı doğru hareket et)
background-repeat:no-repeat;(tekrar etme)
Böylece background resmimizi tekrarlama sorununu ortadan kaldırıyoruz.

Sabit veya Kayma Durumu(attachment)

Arka plan sayfa ile kaysın mı yoksa sabit mi kalsın ayarlarını bu seçenek ile yaparız.Bunun değerleri:
background-attachment:scroll;(Sayfa ile kayar)
background-attachmet:fixed;(Sabittir)

Pozisyon(position)

Position özelliği ile birlikte arka plana eklediğiniz resmin pozisyonunu belirlemek için kullanılır.Yani sağ-sol-üst-alt-orta gibi yönlere resmi çekebilirsiniz.

background-position:top-left;(Üst sol)
background-position:top-right;(Üst sağ)
background-position:top-center;(Üst orta)
background-position:center-left;(Orta sol)
background-position:center-right;(Orta sağ)
background-position:center-center;(Ekranın ortası)
background-position:bottom-left;(Alt sol)
background-position:bottom-rigt;(Alt sağ)
background-position:bottom-center;(Alt Orta)

Arka Plan Renk(color)

Color arka plana eklenen resmin açık kalan kısımlarını doldurmak için kullanılan bir özelliktir.Arka plan resmini sadece üst tarafta kullanırsanız eğer alt taraf açık kalacaktır.Color özelliği ile bu durumu ortadan kaldırıyoruz ve açık olan kısımları dolduruyoruz."background-color:red;" gibi kullanılır.İsteğe göre renk kodlarıda kullanılabilir.

Benzer Konular
Konu	Konuyu Başlatan	Forum	Cevaplar	Son Mesaj
Background	tam1deLi	mIRC Scripting Sorunları	1	27 Haziran 2009 19:55
BackGround hakkında..	Lord_Raiden	mIRC Scripting Sorunları	1	10 Aralık 2008 23:05

Konuyu Toplam 1 Üye okuyor. (0 Kayıtlı üye ve 1 Misafir)

Etiketlenen Kullanıcılar
Etiketlemek istediğiniz kullanıcılar arasına virgül koyunuz. Örnek: nokta,sukunet,NucLear

5846 sayılı Fikir ve Sanat Eserleri Kanunu gereğince sitemizde telif hakkı bulunan mp3,video v.b. eserlerin paylaşımı yasaktır. Yasal işlem olması halinde paylaşan kişi yada kişilerin bilgileri gerekli kuruma verilecektir.