* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body,
html {
    width: 100%;
    height: 100%;

    /* Görselin kendi arkaplan tonuna yakın lacivert/koyu mavi renk */

    /* Masaüstü cihazlar için bg1.jpg görselini kullanıyoruz */
    background-image: url('bg1.jpg');

    /* Varsayılan olarak ekranın tam ortasına yerleştir */
    background-position: center center;
    background-repeat: no-repeat;

    /* Masaüstünde (geniş ekranlarda) fotoğrafın tamamını yay ve sadece ortasını göster */
    background-size: cover;
}

/* Mobil cihazlarda (ekran genişliği 768px ve altı) fotoğrafın tamamı gözüksün */
@media (max-width: 768px) {

    body,
    html {
        /* Mobil cihazlar için bg.jpg görselini kullanıyoruz */
        background-image: url('bg.jpg');
        background-size: contain;
    }
}