CSS "background-position" özelliği, bir öğenin arka plan görselinin pozisyonunu belirlemek için kullanılır. Bu özellik, "top", "bottom", "left", "right", "center" veya "x y" formatında piksel veya yüzde değerleri alabilir.

"top" ve "bottom" değerleri, arka plan görselinin dikey olarak nerede görüntüleneceğini belirler. "left" ve "right" değerleri ise, arka plan görselinin yatay olarak nerede görüntüleneceğini belirler.

Aşağıdaki örneği inceleyelim..

div {
    background-position: top;
}

Bu örnekte bir divin arka plan görselinin en üst noktada görüntülenmesi belirtilmiştir.

Ayrıca, "center" değeri ile arka plan görselinin ortasına hizalanmasını sağlayabilirsiniz. Örneğin, bir divin arka plan görselinin ortasına hizalanmasını istiyorsanız, aşağıdaki kodu kullanabilirsiniz..

div {
    background-position: center;
}

"x y" formatında değerler kullanarak, arka plan görselinin dikey ve yatay olarak nerede görüntüleneceğini belirleyebilirsiniz. Örneğin, bir divin arka plan görselinin sağ alt köşesine hizalanmasını gösteren örnek kod aşağıda verilmiştir.

div {
    background-position: right bottom;
}

Sonuç olarak, CSS "background-position" özelliği bir öğenin arka plan görselinin pozisyonunu belirlemek için kullanılır. Bu özellik, "top", "bottom", "left", "right", "center" veya "x y" formatında piksel veya yüzde değerleri alabilir. Bu özellik sayesinde, arka plan görselinin dikey veya yatay olarak nerede görüntülenmesini istediğinizi belirleyebilirsiniz ve web sayfanızda daha estetik ve düzenli bir görünüm elde edebilirsiniz.