Scalable background image CSS

Browser & Compatibility
1

Full Page Background Image

A common request is how to set an image to spread across the entire background of the page responsively. The CSS below also uses the ${resourcesFolderName} variable explained above, and is adapted from this URL: https://css-tricks.com/perfect-full-page-background-image/.

<style>
html { 
  background: url(${resourcesFolderName}/background.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
</style>

Hi Daniel -
This ‘cover’ property value to get a background image to scale proportionally, works fabulously everywhere, except for Android browsers - I do need this to work for at least a Samsung Galaxy S5 or greater (not sure what OS that is, but it’s fairly recent). If the background image in Hype on one of these phones is sitting fixed and ignoring ‘cover’, do you have any suggestions?
thanks Daniel - we just need to find easy one-size-fits-all for teaching purposes -

2

try to use the body and not HTML.
use the code below

body { 
        min-height:100%;
	min-width:100%;
	height:100%;
	width:100%;
  background: url(${resourcesFolderName}/background.jpg) no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-attachment: fixed !important;
}
1 Like