Html ile sayfalarımızın arka plan rengini değiştirebilir, yada arka plana resim ekleyebiliriz. Bu işlemler için html'nin background ve bgcolor parametrelerini kullanırız.
Arka plan resmini değiştirmek
Sayfalarımızın arka planı varsayılan olarak beyazdır. Eğer farklı bir renk belirtmemişsek sayfa arka plan rengimiz beyaz olarak görünür. Sayfalarımıza arka plan rengi vermek için body etiketine bgcolor parametresi ekleriz.
Yukarıdaki kodları siyah.html olarak kaydedin. Sayfanın arka plan renginin siyah olduğunu göreceksiniz. Arka plan rengini ayarlarken ana renklerin adını da yazabiliriz. Tabi ki ingilizce olarak.
Her iki kod da aynı işi yapacak ve sayfamızın arka plan rengi siyah olacaktır.
Arka plana resim eklemek
Sayfa arka planına resim eklerken de body etiketine background parametresi eklenir. Aşağıdaki kodları resim.html olarak kaydedin. Arka plan için kullanacağınız resimi de ayarlayın bu arada
Resiminizin uzantısı ve adı ne ise background etiketine belirtmelisiniz. Resiminiz bir .gif resmi yada bir .png resmi ise resim.gif yada resim.png olarak belirtmelisiniz.
Başka sitedeki bir resmi kullanmak
Html sayfamız ile aynı dizinde olan bir resmi arka plan resmi olarak ayarlayabileceğimiz gibi başka bir sitedeki resimi de arka plan resmi olarak kullanabiliriz. Bunun için resmin tam olarak bulunduğu adresi yazmalıyız.
Bu şekilde başka bir sitedeki resimi de arka plan resmi olarak kullanabiliriz.
Css Bakground Dersleri ,
Bazen sitelerimizin öğelerinin arkaplanına desen vermek isteriz. "Table"'lara bunu yapmak kolaydı. WYSIWYG düzenleyicileri kolaylıkla bunu yapmamızı sağlıyorlardı. Peki ya sitemizin tamamına desen vermek istersek ne yapacağız? Css ile çok basit bir kod kullanarak bunun üstesinden gelebiliriz.
örnek:
Bu kullandığımız kod sitemizi < body > seçicisine yukarıda belirttiğimiz özellikleri kazandırır. Gelin biraz da özelliklerden bahsedelim.
background-image:
Örnekte gördüğünüz gibi arkaplan resmi olarak "resimler" klasöründeki "arkaplan.jpg" resmini seçtiğimizi bu özellikle belirtiyoruz.
background-repeat:
Bu özellik ile arkaplan resmimizin tekrar edip etmeyeceğini, eğer edecekse x'mi yoksa y ekseninde mi edeceğini belirtiriz. Alabileceği değerler:
Arkaplan sayfa ile birlikte kaysın mı yoksa sabit mi kalsın ayarını bu seçenek ile yaparız. Bunun değerleri:
Arkaplan resminin altında kalan alanın rengini, yani arkaplanın rengini belirlediğimiz özelliktir.
background-position:
Arkaplan deseninin başlayacağı yeri belirtir. Alabileceği değerler:
Arka plan resmini değiştirmek
Sayfalarımızın arka planı varsayılan olarak beyazdır. Eğer farklı bir renk belirtmemişsek sayfa arka plan rengimiz beyaz olarak görünür. Sayfalarımıza arka plan rengi vermek için body etiketine bgcolor parametresi ekleriz.
Kod:
<html>
<head>
<title>Siyah arka plan</title>
</head>
<body bgcolor="#000000">
</body>
</html>
Kod:
<html>
<head>
<title>Siyah arka plan</title>
</head>
<body bgcolor="black">
</body>
</html>Arka plana resim eklemek
Sayfa arka planına resim eklerken de body etiketine background parametresi eklenir. Aşağıdaki kodları resim.html olarak kaydedin. Arka plan için kullanacağınız resimi de ayarlayın bu arada
Kod:
<html>
<head>
<title>Arka planda resim</title>
</head>
<body background="resim.jpg">
</body>
</html>Başka sitedeki bir resmi kullanmak
Html sayfamız ile aynı dizinde olan bir resmi arka plan resmi olarak ayarlayabileceğimiz gibi başka bir sitedeki resimi de arka plan resmi olarak kullanabiliriz. Bunun için resmin tam olarak bulunduğu adresi yazmalıyız.
Kod:
<html>
<head>
<title>Arka planda resim</title>
</head>
<body background="http://www.baskasite.com/resim.jpg">
</body>
</html>Bu şekilde başka bir sitedeki resimi de arka plan resmi olarak kullanabiliriz.
Css Bakground Dersleri ,
Bazen sitelerimizin öğelerinin arkaplanına desen vermek isteriz. "Table"'lara bunu yapmak kolaydı. WYSIWYG düzenleyicileri kolaylıkla bunu yapmamızı sağlıyorlardı. Peki ya sitemizin tamamına desen vermek istersek ne yapacağız? Css ile çok basit bir kod kullanarak bunun üstesinden gelebiliriz.
örnek:
Bu kullandığımız kod sitemizi < body > seçicisine yukarıda belirttiğimiz özellikleri kazandırır. Gelin biraz da özelliklerden bahsedelim.
background-image:
Örnekte gördüğünüz gibi arkaplan resmi olarak "resimler" klasöründeki "arkaplan.jpg" resmini seçtiğimizi bu özellikle belirtiyoruz.
background-repeat:
Bu özellik ile arkaplan resmimizin tekrar edip etmeyeceğini, eğer edecekse x'mi yoksa y ekseninde mi edeceğini belirtiriz. Alabileceği değerler:
- repeat - Hem yan olarak hem de alta doğru tekrar et
- repeat-x - yana doğru tekrar et
- repeat-y - aşağı doğru tekrar et
- no-repeat - tekrar etme
Arkaplan sayfa ile birlikte kaysın mı yoksa sabit mi kalsın ayarını bu seçenek ile yaparız. Bunun değerleri:
- scroll - sayfa ile kayar
- fixed - sabittir
Arkaplan resminin altında kalan alanın rengini, yani arkaplanın rengini belirlediğimiz özelliktir.
background-position:
Arkaplan deseninin başlayacağı yeri belirtir. Alabileceği değerler:
- top left - üst sol
- top center - üst orta
- top right - üst sağ
- center left - orta sol
- center center - ekranın ortası (hem üstten hem yandan)
- center right - orta sağ
- bottom left - alt sol
- bottom center - alt orta
- bottom right - alt sağ
- x-% y-% - yüzde olarak sağ/sol ve üst/alt
- x-pos y-pos - x,y koordinatlarına göre
