CSS Arkaplan Resmini Tam Ekran Yapma

sdkbyrm · 23 Aralık 2020

Bu örneğimizde CSS kullanarak sayfamızda belirlediğimiz arkaplan resminin tam ekran olarak ayarlanmasını sağlayacağız. Örneğimizde “İstiklal Marşı” nı kullanacağız ve arka planda bir Türk Bayrağı ayarlayacağız. Ayarladığımız bu resmin kaydırma çubuklarıyla sayfanın aşağı ve yukarı hareket ettirildiğinde sabit olarak kalmasını sağlayacağız. Örneğimizde bayrak.jpg isimli resmi kullanacağımızdan sizde aynı örneği yapacaksanız bu isimde resmi çalıştığınız klasöre kopyalamanız gerekecektir.

Örneğimizde Arkaplan resminin tam ekran olarak görünmesini sağlayacak CSS kodları aşağıdaki gibi olacaktır.

1
2
3
4
5
6
7
8
9

html {
background: url(bayrak-siiri_1482498107.gif) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Örneğin tamamı için;

Html Kodları:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104

<!DOCTYPE html>
<html>
<head>
<title>İstiklal Marşı</title>
<meta charset="utf-8">
<meta name="description" content="İstiklal Marşı">
<meta name="author" content="www.yazilimkodlama.com">
<style>
html {
background: url(bayrak.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

p{
font-size: 20px;
color: whitesmoke;

}
h1{
font-size: 35px;
color: whitesmoke;
}

</style>
</head>
<body>
<h1>İSTİKLAL MARŞI</h1>


Korkma, sönmez bu şafaklarda yüzen al sancak; 
Sönmeden yurdumun üstünde tüten en son ocak. 
O benim milletimin yıldızıdır, parlayacak; 
O benimdir, o benim milletimindir ancak. 



Çatma, kurban olayım, çehrene ey nazlı hilal! 
Kahraman ırkıma bir gül... Ne bu şiddet, bu celal? 
Sana olmaz dökülen kanlarımız sonra helal; 
Hakkıdır, Hakk'a tapan, milletimin istiklal. 



Ben ezelden beridir hür yaşadım, hür yaşarım. 
Hangi çılgın bana zincir vuracakmış? Şaşarım! 
Kükremiş sel gibiyim: Bendimi çiğner, aşarım; 
Yırtarım dağları, enginlere sığmam taşarım. 



Garb'ın afakını sarmışsa çelik zırhlı duvar; 
Benim iman dolu göğsüm gibi serhaddim var. 
Ulusun, korkma! Nasıl böyle bir imanı boğar, 
"Medeniyet!" dediğin tek dişi kalmış canavar? 



Arkadaş! Yurduma alçakları uğratma sakın; 
Siper et gövdeni, dursun bu hayasızca akın. 
Doğacaktır sana va'dettiği günler Hakk'ın... 
Kim bilir, belki yarın, belki yarından da yakın. 



Bastığın yerleri ''toprak!'' diyerek geçme, tanı! 
Düşün altındaki binlerce kefensiz yatanı. 
Sen şehid oğlusun, incitme, yazıktır, atanı: 
Verme, dünyaları alsan da, bu cennet vatanı. 


Kim bu cennet vatanın uğruna olmaz ki feda? 
Şüheda fışkıracak toprağı sıksan, şüheda! 
Canı, cananı, bütün varımı alsın da Huda, 
Etmesin tek vatanımdan beni dünyada cüda. 



Ruhumun senden İlahi şudur ancak emeli: 
Değmesin ma'bedimin göğsüne na-mahrem eli; 
Bu ezanlar ki şehadetleri dinin temeli 
Ebedi, yurdumun üstünde benim inlemeli. 


 O zaman vecd ile bin secde eder varsa taşım; 
Her cerihamda İlahi, boşanıp kanlı yaşım, 
Fışkırır ruh-i mücerred gibi yerden na'şım! 
O zaman yükselerek Arş'a değer, belki, başım. 



Dalgalan sen de şafaklar gibi ey şanlı hilal! 
Olsun artık dökülen kanlarımın hepsi helal. 
Ebediyyen sana yok, ırkıma yok izmihlal: 
Hakkıdır, hür yaşamış, bayrağımın hürriyet; 
Hakkıdır, Hakk'a tapan, milletimin istiklal. 

</body>
</html>

Ekran Çıktısı:

CSS Arkaplan Resmini Tam Ekran Yapma

sdkbyrm