CSS'de Arkaplan Özellikleri

Bu dersimizde CSS'nin arkaplan özelliklerini ve kullanım biçimini inceleyelim.

Bu dersimizde CSS'nin arkaplan özelliklerini ve kullanım biçimini inceleyelim.

Background kullanımına örnek:


<html>

<head>

<title>css<title>

<style type="text/css">

<!--

p{

background-color:#00ff00;

background-image: url(".../resimler/logo.gif");

background-position:center;

background-repeat:repeat-x;

font-size:xx-large;

}

--->

</style>

</head>

<body>

<h1><p>ENVER VOLKAN<h1></p>

</body>

</html>



background-color: Artalanın rengini belirler. css'te renkleri blue, red gibi tanımlayabildiğimiz gibi html kodu vererek de tanımlayabiliriz. sayfa zemin rengi verebileceğimiz gibi, bağlantılara, başlıklara, paragraflara, metinlere, listelere, tablolara ve form öğelerine zemin rengi verebiliriz.

ÖRNEK:


<STYLE TYPE="TEXT/CSS">

<!--

body{background-color:silver;}

a{background-color:pink;}

p{background-color:olive;}

h2{background-color:siver;}

font{background-color:oranger;}

li{background-color:silver;}

select{background-color:siver;}

textarea{background-color:green;}

input{background-color:silver;}

td{background-color:blue;}

-->

</stle>



background-image: Artalana bir resim dosyası eklemek için kullanılır.url etiketinin içine resim dosyasının tam olarak yazılmalıdır...


body background-image:url("zemin.jpg");



background-attachment: Zemin renginin sayfanın kaydırılması ile birlikte kayması veya sabit kalması durumunu kontrol eder. Özelikle body etiketine verilen bir stil kontrolüdür. İki çeşittir:

scoll: zemin renginin sayfa ile birlikte kaymasını sağlar.
fixed: sayfa kaydırılınca zemin grafiği sabit kalır.

ÖRNEK:


background-attachment: fixed;



backgrund-position:

left: Artalanı sol tarafta olmasını sağlar
center: Artalanı ortalar
right: Artalanı sağ tarafta olmasını sağlar

background-repeat: Artalandaki resmin tekrarlanmasını sağlar.

repeat: tüm yönlerde tekrar etmesini sağlar
repat-x: x (yatay) yönünde tekrarı sağlar
repeat-y: y (dikey) yönünde tekrarı sağlar
not-repeat: tekrar etmez bir kere gösterir

background: Bu kontrol zemin grafiği stillerinin toplu olarak belirtilmesinde kullanılır. Stil özellikleri aralarına herhangi bir noktalama işareti konulmadan boşluk bırakılarak ardışık olarak yazılır.


background:url: (".../resimler/volkan.jpeg") #00ff00 repeat-y fixed;



Kolay gelsin.
  • Etiketler;
E. Volkan Bayrakçı
1988'de Mersin'de doğdu. <p>2006 yılından itibaren Cisco ve Microsoft teknolojileri ile yakından ilgilendi. CCNA (Cisco Certified Network Professional) ve MCTS (Microsoft Certified Technology Specialist) ünvanlarına sahiptir. Yazılım ile tanıştığı ilk günden bugüne kadar proje ve programlama dilleri ile uğraşıp birçok ajans ve firmaya danışmanlık yapmıştır. <p>Şu an Adana'da özel bir şirkette Network uzmanı olarak iş hayatına devam etmektedir. Ayrıca üniversite hayatına devam etmekte ve freelancer - home office olarak web tasarım ve .net yazılım alanında çalışmalar yapmaktadır.
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

Tşkler
devamı gelecek arkadaşlar
GÜZEL GİDİYORSUN
emeginize sağlık:-dusun:
ekledim olduu ama resmin boyutunu ayarlamam gerekiyor onu nasıl yapıcam
unutulmuş bir şey var.Eğer {background="#" atadıktan sonra width ve heigth değeri atamazsanız resmin tam boyutunu alamazsınız.Orjinal arkaplan kod biçimi şudur. [code].deneme { background: url("resim adresi")#renkkodu; width: ...(px/%) ; heigth: ...(px/%) } [/code] Default hali budur.İyi Paylaşımlar.

Yukarı Git