@charset "utf-8"; /* CSS Document */ body { background: url('bg.jpg') no-repeat center center fixed; background-position:inherit; background-repeat: no-repeat; /* 2. Prevent the image from tiling */ background-position: center center; /* 3. Center the image horizontally and vertically */ background-size: cover; /* 4. Scale the image to cover the entire container */ background-attachment: fixed; /* 5. Keep the image fixed in place during scrolling */ margin: 0; /* Remove default body margin */ height: 60vh; /* Ensure the body takes the full height of the viewport */ } Key CSS Properties Explained background-image: url('your_image.jpg');: Specifies the path to your image file. background-repeat: no-repeat;: Prevents the image from repeating if it is smaller than the screen. background-position: center center;: Aligns the image to the center of its container both horizontally and vertically. background-size: cover;: Resizes the background image to cover the entire container, while maintaining its aspect ratio. Some cropping may occur to achieve this effect. background-attachment: fixed;: Anchors the background image to the browser's viewport, so it stays in the same position even if the user scrolls the page. Using the element For potentially better compatibility across all devices and to ensure the background always covers the entire viewport height, some developers prefer applying the styles to the element. You may also use the CSS shorthand property: css html { } body { }