CSS (Cascading Style Sheets), web sayfalarında biçimlendirme ve tasarım işlemlerini yapmak için kullanılan bir dil olduğundan, CSS ile bir arka plan resmi sayfaya sığdırmak mümkündür. Örneğin, aşağıdaki CSS kodu ile bir sayfanın arka plan resmini tam olarak sayfaya sığdırabilirsiniz:
body {
background-image: url("image.jpg");
background-size: cover;
}
Bu kod, sayfanın <body>
elementine uygulanacaktır ve image.jpg
adlı resmi tam olarak sayfaya sığdıracaktır. Eğer belirtilen elementin arka plan resmini daha spesifik bir şekilde ayarlamak isterseniz, CSS seçicilerini kullanarak daha spesifik bir element seçebilirsiniz. Örneğin, sadece id’si main-content
olan elementin arka plan resmini tam olarak sayfaya sığdırmak için aşağıdaki kodu kullanabilirsiniz:
#main-content {
background-image: url("image.jpg");
background-size: cover;
}
Bu kod, sadece id’si main-content
olan elemente uygulanacaktır ve image.jpg
adlı resmi tam olarak sayfaya sığdıracaktır. Eğer belirtilen elementin arka plan resmini daha fazla özelleştirmek isterseniz, CSS ile daha fazla seçenek kullanabilirsiniz. Örneğin, aşağıdaki kod ile arka plan resminin tekrarını etkinleştirebilir ve resmi yatay ve dikey olarak ortalaabilirsiniz:
body {
background-image: url("image.jpg");
background-repeat: repeat;
background-position: center center;
}
Bu kod, sayfanın <body>
elementine uygulanacaktır ve image.jpg
adlı resmi tekrarlayacak ve yatay ve dikey olarak ortalayacaktır.