Fullscreen responsive background image in CSS

Solution 1:

jsBin demo

background: url(image.jpg) fixed 50%;
background-size: cover;                 /* PS: Use separately here cause of Safari bug */

^{The fixed (background-attachment) is optional.}

The above is just a shorthand for:

background-image      : url(image.jpg);
background-attachment : fixed;
background-position   : 50% 50%;     /* or: center center */
background-size       : cover;       /* CSS3 */

You've could in all modern browsers but Safari use:

background: url(image.jpg) fixed 50% / cover;

where the / is used in background shorthand to separate and distinguish position from size (cause position accepts both single and multiple (X,Y) values), but Safari has a bug with this / shorthand so use as described above.

Solution 2:

Use the background-size attribute and set the background repeat to no-repeat.

Like this:

body { 
        background: url('http://www.androidtapp.com/wp-content/uploads/2012/11/Angry-Birds-Star-Wars-Menu.png') no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

See this jsFiddle

Solution 3:

Set this for your background image

background-size: cover