Merhaba arkadaşlar web tasarım'a ilk başladığınız zamanlarda, göreceğiniz komut olan "background" komutunun, bir çok anlama gelebildiğini biliyormuydunuz ? Bugün sizlere "background" komutunun bütün anlamlarını bir konu içerisinde sizlere sunacağım.
Background komutu sırasıyla;
1-)background-color
2-)background-image
3-)background-repeat
4-)background-attachment
5-)background position
2-)background-image
3-)background-repeat
4-)background-attachment
5-)background position
Ancak bu saydığım özellikler'de dağılmaktadır. Yani bu özelliklerin'de (Alt Dalı) bulunmaktadır. Konumuza geçelim elbet anlıcaksınız 
Background İmage:
Background image özelliği sayesinde resminize,
(Background-image) özelliği sayesinde arkaplanınıza gir resim ekleyebilirsiniz.
(Background-repeat) sayesinde arka planda olarak kullanılan resmin hangi eksende tekrar edip etmemesini ayarlayabilirsiniz.
(Background-position) Özellikle div etiketlerinde bir çok etkisi bulunmaktadır. Belirlediğimiz kodun sabit olması, göreceli olması, bizi takip edecek şekilde olması gibi gibi özellikleri vardır. Bu özellikler ise sırasıyla; position-absolute/ position-relative / position-fixed / gibidir.
(Background-attachment) Bu özellik sayesinde arka plan olarak kullanılan resmin, sayfa hareket ettirildiğinde sabit yada yüzer durumda olup- olmamasını kontrol etmek için kullanılır.
(Background-image) özelliği sayesinde arkaplanınıza gir resim ekleyebilirsiniz.
(Background-repeat) sayesinde arka planda olarak kullanılan resmin hangi eksende tekrar edip etmemesini ayarlayabilirsiniz.
(Background-position) Özellikle div etiketlerinde bir çok etkisi bulunmaktadır. Belirlediğimiz kodun sabit olması, göreceli olması, bizi takip edecek şekilde olması gibi gibi özellikleri vardır. Bu özellikler ise sırasıyla; position-absolute/ position-relative / position-fixed / gibidir.
(Background-attachment) Bu özellik sayesinde arka plan olarak kullanılan resmin, sayfa hareket ettirildiğinde sabit yada yüzer durumda olup- olmamasını kontrol etmek için kullanılır.
Kod:
tht{background-image:url (elma.png);
background-repeat: no-repeat;
background-position:left right bottom;
background-attachment: fixed;}Background Color:
Background-color özelliği sayesinde bir öğenin arka plan rengini değiştirebilirsiniz.
Renk kodlarınıda yoğun bir şekilde anlattığım konuyu incelerseniz size çok yardımı olacaktır.https://www.turkhackteam.org/web-programlama/1766051-css-ve-renk-kodlari-genis-anlatim-depdip.html
Kod:
tht{background-color:#C93}Renk kodlarınıda yoğun bir şekilde anlattığım konuyu incelerseniz size çok yardımı olacaktır.https://www.turkhackteam.org/web-programlama/1766051-css-ve-renk-kodlari-genis-anlatim-depdip.html
Background Repeat:
Background-repeat özelliğini açıklamak gerekirse. Örnek olarak genişliği 1 px boyunda 1 alanda sabitlendi. Bu durumda repeat özelliğini kullanarak sayfımızın genişliği boyunca bu 1 px boyutundaki resmi yayabilir ve istediğimiz arka plana ulaşabilirsiniz.
Kod:
tht1{background-image:url("elma.png");}
tht2{background-repeat:repeat-x;}
tht3{background-image:url("elma.png");}
tht4{background-repeat:repeat-y;}
tht5{background-image:url("elma.png");}
tht6{background-repeat:no-repeat;}Background-Attachment:
Bu özellik ile belirttiğimiz arka plan rengini scroll hareket sistemiyle hareket etmesini veya zeminde çakılı bir şekilde görüntülenebilmesini sağlayabiliriz.
Kod:
.tht{background-image:ulr("elma.png");}
.tht2{background-attachment:fixed};
.tht3{background-image:ulr("elma.png");}
.tht4{background-attachment:scroll};Background Position:
Background-repeat özelliği sayesinde sayfamızdaki arkaplanımıza istediğimiz koordinatta kullanmamıza olanak sağlar; Left bottom, right top, botto,right center gibi.
Kod:
.tht1{background-image:url("elma.png");}
.tht2{background-repeat:no-repeat ;}
.tht3{background-position:bottom;}
