HTML TEMELLERİ
HTML5
İLERİ SEVİYE
CSS TEMELİ
css arkaplan kodu
css arkaplan rengi
css arkaplan resmi boyutlandırma
css arkaplan rengi değiştirme
css arkaplan sabitleme
css background kullanımı
css background kodu
css arkaplan resmi sığdırma
css arkaplan tekrarlama
css arkaplan resmi koyma
css arkaplan resmi ekleme
css arkaplan rengi kodu
css arkaplan renk
css arkaplan renk geçişi
css background image align
css background image ekleme
css background color code
css background color example
css background color and image together
css background repeat image size
css background repeat and position
css background position kullanımı
css background position example
css background position nedir
css background attachment nedir
background attachment css code
background attachment in css
css background color
css background position
css background align

CSS Backgrounds(Arkaplan)

CSS Backgrounds(Arkaplan)

Css derslerimize en temel özellik olan arkaplan ile başlıyoruz. Web sayfanızı yada web sayfanızdaki dilediğiniz bölümleri css dilinin arkaplan özellikleri ile dilediğiniz gibi şekillendirebilirsiniz. Bu arkaplan özelliklerini birer örnek ile açıklayalım..

1-Background Image(Arkaplan Resmi)

Bu özellik ise adında anlaşılacağı gibi ilgili bölüme arkaplan resmi eklemenizi sağlar. Bunu yaparken resmin yolunu, ismini ve formatını uygun şekilde belirtmeyi unutmayın. Aşağıdaki örnekte cikti id değerine sahip div etiketimizin arkaplan özelliğini değiştiriyoruz.

Kullanımı:

Css
#cikti{
background-image: url("../../../img/kucuk_bg.png");
}
h2{
color:white;
}
p{
color:white;
}
Html
<html>
<head>
</head>
<body>
<h2>Birinci başlık</h2>
<p>Paragraf yazısı 1</p>
<h2>İkinci başlık</h2>
<p>Paragraf yazısı 2</p>
<h2>Üçüncü başlık</h2>
<p>Paragraf yazısı 3</p>
</body>
</html>

2-Background Color(Arkaplan Rengi)

Bu özellik ile ilgili bölüme arkaplan rengi verebilirsiniz. Renk değerini verirken rengin ismini, hex veya rgb kodlarını kullanabilirsiniz.Renk kodlarının ne olduğunu bilmiyorsanız renk kodları dersimize bir göz atınız.

Kullanımı:

Css
.icerik h2 {/* sayfadaki tüm h2 etiketleri */
background-color: #ccc;
}
.icerik p {/*sayfadaki tüm p etiketleri */
background-color: red;
}
#cikti{/* cikti div bölümü */
background-color:lightblue;
}
Html
<html>
<head>
</head>
<body>
<div class="icerik">
<h2>Birinci başlık</h2>
<p>Paragraf yazısı 1</p>
<h2>İkinci başlık</h2>
<p>Paragraf yazısı 2</p>
<h2>Üçüncü başlık</h2>
<p>Paragraf yazısı 3</p>
</div>
</body>
</html>

3-Background Repeat(Arkaplan Tekrarı)

Bu özellik ile istediğiniz bölümdeki arkaplan resmini tekrar etmesini sağlayabilir yada otomatik olarak tarayıcı resim küçük ise aynı resmi alanı doldurmak için tekrar tekrar ekleyecektir bunu engelleyebilirsiniz. Açıklamasında kafanız karışmış olabilir örnekte daha iyi anlayacaksınız.

Kullanımı:

Css
.icerik h1{/* sayfadaki tüm h1 etiketleri */
background-image: url("../../../img/gradient.png");
background-repeat: repeat-x;/*yatayda tekrarı sağlar*/
/*background-repeat: repeat-y; dikeyde tekrarı sağlar*/
/*background-repeat: no-repeat; tekrar etmesini engeller*/
}
Html
<html>
<head>
</head>
<body>
<div class="icerik">
<h1>Birinci başlık</h1>
<p>Paragraf yazısı 1</p>
<h1>İkinci başlık</h1>
<p>Paragraf yazısı 2</p>
<h1>Üçüncü başlık</h1>
<p>Paragraf yazısı 3</p>
</div>
</body>
</html>

4-Background Position(Arkaplan Konumu)

Bu özellik ile ilgili alanın arkaplan resminin konumunu belirlemenizi sağlar. Bu özellik genelde küçük resimler için kullanılır.

Kullanımı:

Css
#cikti{
height:300px;/*yükseklik değerini veriyoruz*/
background-image: url("../../../img/flower.png");
background-repeat: no-repeat;/*resmin tekrarlanmasını önlüyoruz*/
background-position: right top;/*resim sağ üstte gösterilsin*/
/*background-position: right bottom; resim sağ altta gösterilsin */
/*background-position: left top; resim sağ üstte gösterilsin.*/
/*background-position: center; resim ortada gösterilsin.*/
/*Not: Bunun gibi birçok konum verebilirsiniz.*/
/* Kısa yazımı */
/*background: #ffffff url("../../img/flower.png") no-repeat right top;*/
}
Html
<html>
<head>
</head>
<body>
<h1>Birinci başlık</h1>
<p>Paragraf yazısı 1</p>
<h1>İkinci başlık</h1>
<p>Paragraf yazısı 2</p>
<h1>Üçüncü başlık</h1>
<p>Paragraf yazısı 3</p>
<h1>Dördüncü başlık</h1>
<p>Paragraf yazısı 4</p>
<h1>Beşinci başlık</h1>
<p>Paragraf yazısı 5</p>
<h1>Altıncı başlık</h1>
<p>Paragraf yazısı 6</p>
</body>
</html>

5-Background Attachment(Arkaplan Bağlılığı)

Bu özellik ile arkaplan resimlerinizin sayfaya olan bağlılığını kontrol edebilirsiniz. Resimlerinizi bulunduğu alana sabitleyebilir veya kaymalarını sağlayabilirsiniz.

Kullanımı:

Css
#cikti{
background-image: url("../../../img/flower.png");
background-repeat: no-repeat;/*resmin tekrarlanmasını önlüyoruz*/
background-position: left top;/*resim sol üstte gösterilsin*/
background-attachment: fixed;/*resim sabit kalsın*/
/*background-attachment: scroll; resim kaysın*/
/* Kısa yazımı */
/*background: #ffffff url("../../img/flower.png") no-repeat right top;*/
}
Html
<html>
<head>
</head>
<body>
<h1>Birinci başlık</h1>
<p>Paragraf yazısı 1</p>
<h1>İkinci başlık</h1>
<p>Paragraf yazısı 2</p>
<h1>Üçüncü başlık</h1>
<p>Paragraf yazısı 3</p>
</body>
</html>


Paylaş:

Enes KILIÇ
Webmaster