deaddale
8/21/2015 - 7:43 AM

Perfect Full Page Background Image

Perfect Full Page Background Image

html{
	overflow: hidden;
	position: relative;

	// Fixed-position background image
	&::before {
		content: ' ';
		position: fixed; // instead of background-attachment
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background-color: white;
		background: url(../../images/bg.jpg) no-repeat center center;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		will-change: transform; // creates a new paint layer
		z-index: -1;
	}
}

// or

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;
}