askvity

How do you make the background cover the whole page in CSS?

Published in CSS Styling 3 mins read

To make a background cover the whole page in CSS, you primarily use the background-size property set to cover. This ensures the background image scales to cover the entire container, typically the body or html element, without leaving any gaps.

Implementation Details

Here's a breakdown of the CSS properties you'll use and how they work together:

  • background-image: Specifies the image you want to use as the background.
  • background-size: cover;: Scales the image to cover the entire container. It might clip parts of the image if the image's aspect ratio doesn't match the container's.
  • background-repeat: no-repeat;: Prevents the background image from tiling, ensuring it only appears once.
  • background-position: center;: Centers the background image horizontally and vertically within the container. This helps ensure the most important part of the image is always visible.
  • background-attachment: fixed;: (Optional) Keeps the background image fixed in place while the page is scrolled.

Example CSS

html {
  background-image: url("your-image.jpg"); /* Replace with your image URL */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 100%; /*Ensure the html element takes up the full height*/
}

body {
  margin: 0; /* Remove default body margins to ensure full coverage */
  height: 100%; /*Ensure the body element takes up the full height*/
}

Explanation

  1. html and body Height: Setting both html and body to height: 100%; ensures that these elements stretch to the full height of the viewport. This is crucial because the background-size: cover; property scales the image relative to the size of the container. If the container isn't the full height, the background won't cover the entire visible area.

  2. margin: 0; on body: Most browsers apply default margins to the body element. Removing these margins ensures the background image extends to the edges of the viewport.

  3. background-size: cover;: This is the key property. It tells the browser to scale the background image to cover the entire container (in this case, the html element). The image will be stretched or cropped as necessary to fit.

  4. background-repeat: no-repeat;: Without this, the background image might tile if it's smaller than the container.

  5. background-position: center;: This centers the image within the container. If the image is cropped due to background-size: cover;, centering helps ensure the most important part of the image remains visible. You can also use values like top, bottom, left, right, or percentage values to position the image differently.

Troubleshooting

  • Background not covering the entire page: Make sure both the html and body elements have height: 100%;. Also, check for any margins or padding on the body element that might be preventing the background from reaching the edges of the viewport.
  • Image is distorted: If the image's aspect ratio doesn't match the viewport's aspect ratio, the image will be stretched or cropped. Choose an image with an aspect ratio that's close to the typical screen size of your users. Consider using background-size: contain; instead if you want to avoid cropping but allow for potential gaps. However, contain won't cover the entire page if the aspect ratios don't match.

Related Articles