CSS ile Site Arka Planını Sabitleme

CSS ile Site Arka Planını Sabitleme By: Kerem Date: 28 Ekim 2022, 23:31:20
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.