body, html {
    height: 100%; /* Ensures the html and body cover the full height of the viewport */
    margin: 0;
    padding: 0;
}

.background-image {
    /* Replace 'your-image.jpg' with the actual path to your image file */
    background-image: url('your-image.jpg'); 
    background-position: center; /* Centers the image within the container */
    background-repeat: no-repeat; /* Prevents the image from repeating if it's smaller than the screen */
    background-size: cover; /* This is the key property; it scales the image to cover the entire container while maintaining its aspect ratio */
    height: 100vh; /* Sets the height to 100% of the viewport height */
    width: 100vw; /* Sets the width to 100% of the viewport width */
    position: fixed; /* Keeps the background fixed when scrolling content is added later */
    z-index: -1; /* Ensures the background image stays behind other content */
}

.content {
    /* Style for your actual website content, ensuring it appears over the background */
    position: relative;
    color: white; /* Example text color */
    /* Add other styling for alignment and appearance */
}