Arka plan ile ilgili CSS özellikleri

Articles

CSS'e Giriş

Bu makale, arka plan ile ilgili CSS özelliklerini açıklar.

Arka plan ayarı, konum ve tekrar gibi özellikleri nasıl tanımlayacağınızı öğrenebilirsiniz.

YouTube Video

Önizleme için HTML oluşturma

css-background.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-background.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Background-Related CSS Properties Example</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Background And Decoration</h2>
 20        </header>
 21        <article>
 22            <h3>background-color</h3>
 23            <section>
 24                <header><h4>background-color: red</h4></header>
 25                <section class="sample-view">
 26                    <div class="red-example">This is a red background.</div>
 27                </section>
 28                <header><h4>background-color: #FF5733</h4></header>
 29                <section class="sample-view">
 30                    <div class="hex-example">This is a background with hex color (#FF5733).</div>
 31                </section>
 32                <header><h4>background-color: rgb(255, 87, 51)</h4></header>
 33                <section class="sample-view">
 34                    <div class="rgb-example">This is a background with RGB color (rgb(255, 87, 51)).</div>
 35                </section>
 36                <header><h4>background-color: rgba(255, 87, 51, 0.7)</h4></header>
 37                <section class="sample-view">
 38                    <div class="rgba-example">This is a background with RGBA color (rgba(255, 87, 51, 0.7)).</div>
 39                </section>
 40                <header><h4>background-color: hsl(14, 100%, 60%)</h4></header>
 41                <section class="sample-view">
 42                    <div class="hsl-example">This is a background with HSL color (hsl(14, 100%, 60%)).</div>
 43                </section>
 44                <header><h4>background-color: hsla(14, 100%, 60%, 0.7)</h4></header>
 45                <section class="sample-view">
 46                    <div class="hsla-example">This is a background with HSLA color (hsla(14, 100%, 60%, 0.7)).</div>
 47                </section>
 48                <header><h4>background-color: transparent</h4></header>
 49                <section class="sample-view">
 50                    <div class="transparent-example">This is a background with transparency (transparent).</div>
 51                </section>
 52            </section>
 53        </article>
 54        <article>
 55            <h3>background-image</h3>
 56            <section>
 57                <header><h4>background-image: url('image.jpg')</h4></header>
 58                <section class="sample-view">
 59                    <div class="background-image-example">This is a background image.</div>
 60                </section>
 61                <header><h4>background-image: linear-gradient(to right, red, blue)</h4></header>
 62                <section class="sample-view">
 63                    <div class="background-image-gradient">This is a background gradient.</div>
 64                </section>
 65            </section>
 66        </article>
 67        <article>
 68            <h3>background-position</h3>
 69            <section>
 70                <header><h4>background-position: top left</h4></header>
 71                <section class="sample-view">
 72                    <div class="top-left-example">Top Left</div>
 73                </section>
 74                <header><h4>background-position: center</h4></header>
 75                <section class="sample-view">
 76                    <div class="center-example">Center</div>
 77                </section>
 78                <header><h4>background-position: bottom right</h4></header>
 79                <section class="sample-view">
 80                    <div class="bottom-right-example">Bottom Right</div>
 81                </section>
 82            </section>
 83        </article>
 84        <article>
 85            <h3>background-size</h3>
 86            <section>
 87                <header><h4>background-size: cover</h4></header>
 88                <section class="sample-view">
 89                    <div class="cover-example">Cover</div>
 90                </section>
 91                <header><h4>background-size: contain</h4></header>
 92                <section class="sample-view">
 93                    <div class="contain-example">Contain</div>
 94                </section>
 95                <header><h4>background-size: 100px 100px</h4></header>
 96                <section class="sample-view">
 97                    <div class="fixed-size-example">100px by 100px</div>
 98                </section>
 99            </section>
100        </article>
101        <article>
102            <h3>background-repeat</h3>
103            <section>
104                <header><h4>background-repeat: repeat</h4></header>
105                <section class="sample-view">
106                    <div class="repeat-example">Repeat</div>
107                </section>
108                <header><h4>background-repeat: repeat-x</h4></header>
109                <section class="sample-view">
110                    <div class="repeat-x-example">Repeat X</div>
111                </section>
112                <header><h4>background-repeat: no-repeat</h4></header>
113                <section class="sample-view">
114                    <div class="no-repeat-example">No Repeat</div>
115                </section>
116                <header><h4>background-repeat: space</h4></header>
117                <section class="sample-view">
118                    <div class="space-example">Space</div>
119                </section>
120                <header><h4>background-repeat: round</h4></header>
121                <section class="sample-view">
122                    <div class="round-example">Round</div>
123                </section>
124            </section>
125        </article>
126    </main>
127</body>
128</html>

Arka Plan ve Dekorasyon

`background-color` Özelliği

 1/* Background color specification */
 2.red-example {
 3    background-color: red;
 4}
 5
 6.hex-example {
 7    background-color: #FF5733;
 8}
 9
10.rgb-example {
11    background-color: rgb(255, 87, 51);
12}
13
14.rgba-example {
15    background-color: rgba(255, 87, 51, 0.7);
16}
17
18.hsl-example {
19    background-color: hsl(14, 100%, 60%);
20}
21
22.hsla-example {
23    background-color: hsla(14, 100%, 60%, 0.7);
24}
25
26.transparent-example {
27    background-color: transparent;
28    color: black;
29}

background-color özelliği, bir öğenin arka plan rengini ayarlamak için CSS'de kullanılır. Metin ve diğer öğelerin arkasında gösterilen rengi belirtebilir ve renkleri çeşitli formatlarda tanımlayabilirsiniz. Renk belirtme yöntemi color özelliğine benzerdir, ayrıca transparent kullanarak tamamen şeffaf bir arka plan da belirtebilirsiniz.

Açıklama:

red-example sınıfı, arka plan rengini bir anahtar kelime kullanarak kırmızı olarak belirtir.
hex-example sınıfı, arka plan rengini bir onaltılık (hexadecimal) kod kullanarak belirtir.
rgb-example sınıfı, arka plan rengini RGB formatı kullanarak belirtir.
rgba-example sınıfı, arka plan rengini şeffaflık ekleyerek RGBA formatı kullanarak belirtir.
hsl-example sınıfı, arka plan rengini HSL formatı kullanarak belirtir.
hsla-example sınıfı, arka plan rengini şeffaflık ekleyerek HSLA formatı kullanarak belirtir.
transparent-example sınıfı, arka planı şeffaf olacak şekilde ayarlar.

`background-image` Özelliği

 1/* Background image styles */
 2.background-image-example {
 3    /* Specify the image URL */
 4    background-image: url('image.jpg');
 5    /* Scale the image to cover the entire element */
 6    background-size: cover;
 7    /* Center the image */
 8    background-position: center;
 9    /* Disable image repetition */
10    background-repeat: no-repeat;
11    color: white;
12    display: flex;
13    align-items: center;
14    justify-content: center;
15}
16
17/* Gradient background styles */
18.background-image-gradient {
19    /* Gradient from left to right */
20    background-image: linear-gradient(to right, red, blue);
21    color: white;
22    display: flex;
23    align-items: center;
24    justify-content: center;
25}

background-image özelliği, bir görüntüyü bir öğenin arka planı olarak ayarlamak için kullanılır. Belirtilen görüntü, öğenin arka planı olarak gösterilir ve boyutu, konumu ile tekrar yöntemi diğer ilgili özelliklerle ayarlanabilir. Ayrıca background-size, background-position ve background-repeat gibi ilgili özellikleri de daha sonra açıklayacağız.

Açıklama:

background-image-example sınıfı, background-image özelliğini kullanarak image.jpg dosyasını arka plan olarak ayarlar. background-size: cover, görüntüyü tüm elementi kaplayacak şekilde ayarlar ve background-position: center, görüntüyü ortalar. Tekrarlama, background-repeat: no-repeat ile devre dışı bırakılır.
background-image-gradient sınıfı, kırmızıdan maviye bir arka plan geçişi ayarlamak için linear-gradient() kullanır. Geçiş soldan sağa doğru görüntülenir.

Belirtilmesi Mümkün Değer Türleri

background-image özelliği aşağıdaki değerleri alabilir.

url(): Arka plan görüntüsünün URL'sini belirtir. Görüntü dosyasını url() içinde belirtin. (ex.url('image.jpg'))
none: Arka plan resmi ayarlanmamasını belirtir. Bu varsayılan değerdir.
Geçişler: CSS geçiş özelliklerini kullanarak geçişleri arka plan görüntüleri olarak ayarlamak mümkündür. (ex.linear-gradient(), radial-gradient())

`background-image` Özelliğinin Ana Noktaları

Görüntü boyutu ve konumlandırma: Arka plan görüntülerinin boyutu ve konumu, diğer özelliklerle ayrıntılı olarak kontrol edilebilir, böylece tasarım ayarları yapılabilir. Örneğin, background-size: cover belirtilmesi, görüntüyü tüm alanı kaplayacak şekilde genişleterek herhangi bir kırpmayı kaldırır.
Gradyan Kullanımı: Bir resim yerine, arka plan olarak bir gradyan kullanabilir ve tasarıma dinamik bir öğe ekleyebilirsiniz.

`background-position` Özelliği

 1/* Positioned at the top-left */
 2.top-left-example {
 3    background-image: url('image.jpg');
 4    background-position: top left;
 5    background-size: cover;
 6    background-repeat: no-repeat;
 7    background-color: lightblue;
 8    height: 100px;
 9}
10
11/* Centered */
12.center-example {
13    background-image: url('image.jpg');
14    background-position: center;
15    background-size: cover;
16    background-repeat: no-repeat;
17    background-color: lightcoral;
18    height: 100px;
19}
20
21/* Positioned at the bottom-right */
22.bottom-right-example {
23    background-image: url('image.jpg');
24    background-position: bottom right;
25    background-size: cover;
26    background-repeat: no-repeat;
27    background-color: lightgreen;
28    height: 100px;
29}

background-position özelliği, bir element içindeki arka plan görüntüsünün konumunu belirtmek için kullanılır. Arka plan görüntüsünün element içinde nerede görüneceğini kontrol ederek, tasarımınıza uygun düzenler oluşturabilirsiniz. Varsayılan 0% 0% olup, görüntüyü sol üst köşeye yerleştirir.

Açıklama:

top-left-example sınıfı, görüntü konumunu top left olarak belirtir ve görüntüyü sol üst köşeye yerleştirir.
center-example sınıfı, görüntüyü center özelliğini kullanarak ortada konumlandırır.
bottom-right-example sınıfı, görüntü konumunu bottom right olarak belirtir ve görüntüyü sağ alt köşeye yerleştirir.

Belirtilmesi Mümkün Değer Türleri

background-position özelliği aşağıdaki türde değerler alabilir.

Anahtar Kelimeler: left, right, top, bottom, center belirtebilirsiniz.
- center belirtmek, arka plan görüntüsünü elementin ortasına yerleştirir.
- right belirtmek, arka plan görüntüsünü sağ tarafa yerleştirir.
- top left belirtmek, arka plan görüntüsünü sol üst köşeye yerleştirir.
- bottom right belirtmek, arka plan resmini sağ alt köşeye yerleştirir.
Uzunluk veya yüzde: 10px 20px, 50% 50% gibi değerler belirtebilirsiniz.
- 10px 20px belirtmek, arka plan resmini soldan 10px ve yukarıdan 20px mesafeye yerleştirir.
- 50% 50% belirtmek, arka plan resmini hem yatay hem de dikey olarak ortalar.
calc() fonksiyonu: CSS hesaplamalarını kullanarak daha hassas konumlandırmaya olanak tanır.

`background-size` özelliği

 1/* Fit the image to cover the entire area */
 2.cover-example {
 3    background-image: url('image.jpg');
 4    /* The image covers the entire element */
 5    background-size: cover;
 6    background-color: lightblue;
 7}
 8
 9/* Fit the image within the element */
10.contain-example {
11    background-image: url('image.jpg');
12    /* The image fits within the element */
13    background-size: contain;
14    background-color: lightgreen;
15}
16
17/* Display at a fixed size */
18.fixed-size-example {
19    background-image: url('image.jpg');
20    /* Fixed width of 100px and height of 100px */
21    background-size: 100px 100px;
22    background-color: lightcoral;
23}

background-size özelliği, bir element için arka plan resminin boyutunu belirtmek için kullanılır. Bu özelliği kullanarak, arka plan resminin tasarıma uyacak şekilde tüm elementi doldurup doldurmayacağını veya orijinal boyutunu koruyacağını ayarlayabilirsiniz. Varsayılan değer autodur ve bu, arka plan resminin orijinal boyutunu korur.

Açıklama:

cover-example sınıfı, cover özelliğini belirtir. Resim, tüm elementi kaplayacak şekilde büyütülür ancak bir kısmı kesilebilir.
contain-example sınıfı, contain özelliğini belirtir. Resim, elementin içine sığacak şekilde ayarlanır ancak boş alanlar görünebilir.
fixed-size-example sınıfı, arka plan resmi için her biri 100px olan sabit bir yükseklik ve genişlik boyutu belirtir.

Belirtilmesi Mümkün Değer Türleri

background-size özelliğine aşağıdaki türde değerler atanabilir.

Anahtar kelimeler
- auto: Resmin varsayılan boyutunu korur (genişlik ve yükseklik otomatik olarak belirlenir).
- cover: Arka plan resminin boyutunu, elementi tamamen kaplayacak şekilde ayarlar. Tüm elementi doldurur ancak resmin bazı bölümleri kesilebilir.
- contain: Resmi, elementin içine sığacak şekilde ayarlar ancak tüm elementi kapsamaz. Resmin en-boy oranı korunur.
Sayısal değerler (px, %, em, vb.)
- Genişlik ve Yükseklik: Genişlik ve yüksekliği açıkça belirtin. Sadece bir değer belirtilirse, bu genişlik için geçerlidir ve yükseklik otomatik olarak ayarlanır.
- Yüzde: Arka plan resminin boyutunu, element boyutunun bir yüzdesi olarak belirtin. Örneğin, 50% 50% görüntüyü elemanın genişliğinin ve yüksekliğinin yarısına ayarlar.

`background-repeat` Özelliği

 1/* Repeat vertically and horizontally */
 2.repeat-example {
 3    background-image: url('pattern.png');
 4    background-repeat: repeat;
 5    background-size: auto;
 6}
 7
 8/* Repeat only horizontally */
 9.repeat-x-example {
10    background-image: url('pattern.png');
11    background-repeat: repeat-x;
12    background-size: auto;
13}
14
15/* No repetition */
16.no-repeat-example {
17    background-image: url('pattern.png');
18    background-repeat: no-repeat;
19    background-size: auto;
20}
21
22/* Space out evenly */
23.space-example {
24    background-image: url('pattern.png');
25    background-repeat: space;
26    background-size: auto;
27    width: 90px;
28    height: 60px;
29}
30
31/* Resize and repeat */
32.round-example {
33    background-image: url('pattern.png');
34    background-repeat: round;
35    background-size: auto;
36}

background-repeat özelliği, bir elemanın arka plan görüntüsünün nasıl tekrarlandığını kontrol etmek için kullanılır. Varsayılan olarak, arka plan görüntüsü eleman içinde yatay ve dikey yönde tekrarlanır, ancak bu özelliği kullanarak tekrar davranışını özelleştirebilirsiniz.

Açıklama:

repeat-example sınıfı, görüntüyü hem dikey hem yatay olarak tekrar eder.
repeat-x-example sınıfı, görüntüyü yalnızca yatay olarak tekrar eder.
no-repeat-example sınıfı, görüntüyü tekrar etmeden yalnızca bir kez gösterir.
space-example sınıfı, arka plan görüntülerini aralarında eşit boşluk olacak şekilde düzenler.
round-example sınıfı, arka plan görüntüsünü tekrar edecek ve tüm öğeyi kaplayacak şekilde otomatik olarak yeniden boyutlandırır.

Belirlenebilecek değerler

background-repeat özelliğine aşağıdaki türde değerler atanabilir.

repeat: Arka plan görüntüsü hem X ekseni (yatay) hem de Y ekseni (dikey) boyunca tekrarlanır. Bu varsayılan değerdir.
repeat-x: Arka plan görüntüsü yalnızca X ekseni (yatay) boyunca tekrarlanır.
repeat-y: Arka plan görüntüsü yalnızca Y ekseni (dikey) boyunca tekrarlanır.
no-repeat: Arka plan görüntüsü tekrarlanmaz ve yalnızca bir kez gösterilir.
space: Arka plan görüntüsü düzenli aralıklarla tekrar eder ve aralarında eşit boşluk bırakılır.
round: Arka plan görüntüsü tekrar eder, ancak boyutu tüm elementi dolduracak şekilde ayarlanır. Görüntünün boyutu değiştirilebilir.

Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.

YouTube Video

Kutu modeli ile ilgili CSS özellikleri Kutu modeli dekorasyonuyla ilgili CSS özellikleri

Arka plan ile ilgili CSS özellikleri

YouTube Video

Önizleme için HTML oluşturma

Arka Plan ve Dekorasyon

background-color Özelliği

Açıklama:

background-image Özelliği

Açıklama:

Belirtilmesi Mümkün Değer Türleri

background-image Özelliğinin Ana Noktaları

background-position Özelliği

Açıklama:

Belirtilmesi Mümkün Değer Türleri

background-size özelliği

Açıklama:

Belirtilmesi Mümkün Değer Türleri

background-repeat Özelliği

Açıklama:

Belirlenebilecek değerler

YouTube Video

`background-color` Özelliği

`background-image` Özelliği

`background-image` Özelliğinin Ana Noktaları

`background-position` Özelliği

`background-size` özelliği

`background-repeat` Özelliği