CSS ARKAPLAN (Background) RESiM ÖZELLİKLERİ
background-image özelliği ve ögelerine istediğimiz zemin resmi eklemek ve konumlandırmak için kullanılırız. Örnek olarak "zemin.jpg" isimli görselimizi zemin resmi olarak sayfamıza eklemek için aşağıdaki stil şablonu kodunu uygulamalıyız.
body {background-image:url(zemin.jpg);}
ÇIKTI:

ZEMİN RESMİ TEKRARI
background-repeat özelliği zemine eklenen görselin tekrarlanma biçimini kontrol etmek için kullanılır. Dört ayrı değer alır:
- background-repeat:repeat; (Görselin hem yatay olarak hem de dikey olarak tekrar etmesini istiyorsak bu özelliği kullanırız. Bu özellik yazılmasa bile CSS varsayılan olarak bunu yapacaktır.)
- background-repeat:no-repeat; (Eklediğimiz görselin hiçbir şekilde tekrar etmesini istemiyorsak bu özelliği kullanırız.)
- background-repeat:repeat-x; (Eklediğimiz görsel yatay olarak yani x ekseni boyunca tekrar etsin istiyorsak bu özelliği kullanırız.)
- background-repeat:repeat-y; (Eklediğimiz görsel dikey olarak yani y ekseni boyunca tekrar etsin istiyorsak bu özelliği kullanırız.)
ÖRNEK 1:
body{background-image:url(logo.png);
background-repeat : repeat;
}
ÇIKTI:

ÖRNEK 2:
body{background-image:url(logo.png);
background-repeat :no-repeat;
}
ÇIKTI:

ÖRNEK 3:
body{background-image:url(logo.png);
background-repeat :repeat-x;
}
ÇIKTI:

ÖRNEK 4:
body{background-image:url(logo.png);
background-repeat :repeat-y;
}
ÇIKTI:

ZEMİN RESMİ POZİSYONU
"background-position" özelliği görselin sayfadaki pozisyonunu belirler. Dikey hizalamada üst (top), orta (center) ve alt (bottom) geçerli bir pozisyonken; yatay hizalamada sol (left), orta (center) ve sağ (right) geçerlidir. Bu özellik için 11 ayrı değer bulunmaktadır.
- background-position:top left;(Bu bildirimi kullandığımızda görselimiz üstün solunda yer alacak.)
- background-position:top center;(Bu bildirimi kullandığımızda görselimiz üstün ortasında yer alacak.)
- background-position:top right;(Bu bildirimi kullandığımızda görselimiz üstün sağında yer alacak.)
- background-position:center left;(Bu bildirimi kullandığımızda görselimiz ortanın solunda yer alacak.)
- background-position:center center;(Bu bildirimi kullandığımızda görselimiz ortanın ortasında yer alacak.)
- background-position:center right;(Bu bildirimi kullandığımızda görselimiz ortanın sağında yer alacak.)
- background-position:bottom left;(Bu bildirimi kullandığımızda görselimiz altın solunda yer alacak.)
- background-position:bottom center;(Bu bildirimi kullandığımızda görselimiz altın ortasında yer alacak.)
- background-position:bottom right;(Bu bildirimi kullandığımızda görselimiz altın sağında yer alacak.)
- background-position:x% y%;(Görselimize yatay ve dikey olarak yüzde üzerinden pozisyon vermemizi sağlar. ilk yüzde yatayın, ikinci yüzde ise dikeyin pozisyonudur. Örnek: background-position:80% 55%; )
- background-position:xpos ypos;(Görselimize yatay ve dikey olarak pixel bakımından pozisyon vermemizi sağlar. İlk pixel'li rakam yatayın, ikinci pixel'li rakam ise dikeyin pozisyonudur. Örnek: background-position:150px 200px; )
Örnek olarak bir ağaç resmini merkez sağa yerleştirelim:
body {width:100%; height:650px;
background-image: url(agac.jpg);
background-repeat : no-repeat;
background-position:center right;
}
ÇIKTI:

Şimdide ikinci örnek olarak ağaç resmini alt merkeze yerleştirelim:
body {width:100%; height:650px;
background-image: url(agac.jpg);
background-repeat : no-repeat;
background-position:bottom center;
}
ÇIKTI:

"background" özelliklerini kısaltma uygulayarak şöyle de yazabilirdik:
body{ background:url(logo.gif) no-repeat top center;}
Birkaç örnek daha yapalım:
body{ background: url(logo.gif) no-repeat bottom right;}
body{ background: url(logo.gif) no-repeat 60% 75%;}
body{ background: url(logo.gif) no-repeat 100px 200px;}
background-attachment özelliği
Zemine eklenen resim sayfa ile beraber kaymasını veya sayfanın zeminine sabit kalmasını sağlar.
scroll: Sayfa hareket ettirildiğinde zeminin de kaymasını sağlar.
fixed: Sayfa hareket ettirildiğinde zeminin sabit kalmasını sağlar.
Hiçbir Şey yazılmadığında default(Geçerli) değer; scroll'dur
body {background-image: url(logo.gif);
background-repeat : no-repeat;
background-attachment: fixed }
Nergiz demirsaplı 14/12/2018
yönetici 14/12/2018
body {
background-color: lightblue;
}
Websitenin, arkaplan görünen yere mouse ile gel sol tıkla öğeyi inceleye tıkla burdan incele bir öğeden miras alıyor olabilir, bazı düzeltmeler yaparak deneyebilirsin. Olmasa html inline tanımla daha geçerli bir tanımlamadır.
<body style="background-color: lightblue;">
Gül 25/04/2019
yönetici 26/04/2019
Gül 27/04/2019
yönetici 27/04/2019
Volkan Sabah 20/03/2020
Mücahit 07/04/2020
yönetici 08/04/2020
Melih 02/12/2020
yönetici 04/12/2020
Huzeyfe Bozdoğan 16/01/2021
yönetici 17/01/2021
havva kanca 28/02/2021
yönetici 02/03/2021
veysel 13/06/2021
yönetici 16/06/2021
Ali akbas 12/07/2021
yönetici 13/07/2021
- HTML
- CSS
- PHP
- JQUERY
- PHOTOSHOP
- JavaScript
- Web Dünyası
- Linux
- MİTHRİL FRAMEWORK
- Laravel
- Git
- React
- HTML LİNK(Bağlantı)EKLEME - LİNK VERME
- HTML YAZI VE RESİM ORTALAMA
- HTML RESME LİNK VERME
- HTML FORM OLUŞTURMA
- HTML RESİM EKLEME
- HTML DİV ve SPAN NEDİR?
- CSS YATAY MENÜ YAPIMI
- CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
- HTML ARKAPLANA MÜZİK EKLEME
- KALİTE KAYBETMEDEN RESİMLERİ BÜYÜTME