CSS ile Site Arka Planını Sabitleme

Web sitelerinin arkaplanında konulan tek bir resmin aykaplanı tamamen kapladığını ve sayfayı aşağı - yukarı yapsakta arkaplanın sabit kaldığını görmüşüzdür. Peki bu sabit arkaplanı css ile nasıl sitemize uygulayabiliriz....

Başlatan: Maui - Güncelleme: 28 Ekim 2022, 23:31:20 - Gösterim: 766

« önceki - sonraki »

0 Üyeler ve 1 Ziyaretçi konuyu incelemekte.

CSS ile Site Arka Planını Sabitleme


Web sitelerinin arkaplanında konulan tek bir resmin aykaplanı tamamen kapladığını ve sayfayı aşağı - yukarı yapsakta arkaplanın sabit kaldığını görmüşüzdür. Peki bu sabit arkaplanı css ile nasıl sitemize uygulayabiliriz.

Ortalama 1280×800 çözünürlüğündeki bir arkaplan işimizi görecektir.  Aşağıdaki css kodunu <head> </head> etiketleri arasına yerleştirerek arkaplanı her kullanıcının kullandığı çözünürlüğe göre sabir bir şekilde yerleşmesini sağlarız 

<style>
* { margin: 0; padding: 0; }
html {
background: url(arkaplan.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>


Peki bunu nasıl SMF forumlarda uygulayabilirz diyorsanızda temanızın index.css dosyasında (2.1.x ve default tema için geçerlidir.

Aşağıdaki kodu temanın index.css dosyasında bulalım.
background: #e9eef2;
font: 83.33%/150% "Segoe UI","Helvetica Neue","Nimbus Sans L",Arial,"Liberation Sans",sans-serif;
color: #4d4d4d;
display: flex;
flex-direction: column;
min-height: 100vh;
}

Değiştir
background: url(../images/arkaplan.jpg) top center no-repeat fixed #960A0D;
font: 83.33%/150% "Segoe UI","Helvetica Neue","Nimbus Sans L",Arial,"Liberation Sans",sans-serif;
color: #4d4d4d;
display: flex;
flex-direction: column;
min-height: 100vh;


Son olarakda temanızın images klasörünün içierisine arkaplan.jpg isminde bir resim yollayın ama boyutları yukarıda yazana yakın olsun.
Kerem imza


Deli tarafıma denk gelmeyin, zira orada ben bile hükümsüzüm...

Benzer Konular (5)

1233

Yanıtlar: 8
Gösterim: 2126

16

Yanıtlar: 1
Gösterim: 6886

1284

Yanıtlar: 0
Gösterim: 1205

1966

Yanıtlar: 0
Gösterim: 2729

18 Eylül 2021, 10:46:34
kaska12 tarafından
Clicky