CODEWITHSUNDEEP
htmlcss
Prime
Prime

Reputation: 3625

How to make the background image fit page perfectly

The image was not perfectly fixing to the current page, How to make the background image fit page perfectly 

 .background-image {
  background-image: url('camera.jpg'); 
  background-size: cover;
  display: block;
  height: 800px;
  left: -5px;
  top:-5px;
  bottom:-5px;
  right: -5px;
position: fixed;      
z-index: 1;
  margin:0px auto;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  }

I tried this, but doesn't work along with blur 

background: url(images/bg.jpg) no-repeat center center fixed;

http://jsfiddle.net/vj8skms4/

Upvotes: 0

Views: 482

Answers (1)

maioman
maioman

Reputation: 18734

You're missing the background position property;
so , to have your image vertically center when it overflows horizontally , you should add:

 background: no-repeat center center fixed;

here's a fiddle

Upvotes: 1

Related Questions