IRC ve mIRC Kullanıcılarının Buluşma Noktası
  Mobil Sohbet, Sohbet ve Sohbet Odaları




Yeni Konu aç Cevapla
 
LinkBack Seçenekler Stil
Alt 28 Eylül 2014, 00:43   #1
Deep
Guest
Deep - ait Kullanıcı Resmi (Avatar)
CSS’te Background – Background Image


-- Sponsor Baglantı --


[Ü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.
[Ü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.
  Alıntı ile Cevapla

IRCForumlari.NET Reklamlar
radyo44.com.tr
Cevapla

Etiketler
background, css’te, image, –

Seçenekler
Stil

Yetkileriniz
Konu Acma Yetkiniz Yok
Cevap Yazma Yetkiniz Yok
Eklenti Yükleme Yetkiniz Yok
Mesajınızı Değiştirme Yetkiniz Yok

BB code is Açık
Smileler Açık
[IMG] Kodları Açık
HTML-Kodu Kapalı
Trackbacks are Kapalı
Pingbacks are Açık
Refbacks are Açık


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