Responsive css background images

Solution 1:

If you want the same image to scale based on the size of the browser window:

background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:contain;
background-position:center;

Do not set width, height, or margins.

EDIT: The previous line about not setting width, height or margin refers to OP's original question about scaling with the window size. In other use cases, you may want to set width/height/margins if necessary.

Solution 2:

by this code your background image go center and fix it size whatever your div size change , good for small , big , normal sizes , best for all , i use it for my projects where my background size or div size can change

background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position:center;

Solution 3:

Try this :

background-image: url(_images/bg.png);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;