Skip to content

Instantly share code, notes, and snippets.

@rahuldass
Last active May 7, 2023 16:43
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save rahuldass/9032156 to your computer and use it in GitHub Desktop.
Save rahuldass/9032156 to your computer and use it in GitHub Desktop.
Perfect Full Page Background Image #css

###Perfect Full Page Background Image

We can do this purely through CSS thanks to the background-size property now in CSS3. We'll use the html element (better than body as it's always at least the height of the browser window). We set a fixed and centered background on it, then adjust it's size using background-size set to the cover keyword.

CSS

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
@Hanaka15
Copy link

I love you.

@filipecar12
Copy link

Great job on doing this for everyone.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment