CODEWITHSUNDEEP
htmlcssimagebackground-image
Gaurang Tandon
Gaurang Tandon

Reputation: 6781

Fullscreen responsive background image in CSS

I want to make this image as the background image of my webpage. However , the problem is that the image doesn't cover the whole of the page, as you may see in this preview , and it gets repeated at the rightmost end . Is there a way so that the image covers the whole page (be it any way , stretching , re-sizing , or something new).

My Code:

<!DOCTYPE HTML>
<html>

    <head>
        <title>Angry Birds Star Wars</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
        <style>
            body {
                background: url('http://www.androidtapp.com/wp-content/uploads/2012/11/Angry-Birds-Star-Wars-Menu.png');
            }
        </style>
    </head>

    <body></body>

</html>

Thanks.

UPDATE:

I have now finally come to believe that there is almost nothing that can get that image to fit exactly to my PC screen. I am now ok , and am moving further , please don't post answers now.

Upvotes: 4

Views: 45000

Answers (5)

Roko C. Buljan
Roko C. Buljan

Reputation: 206669

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.

Upvotes: 13

designerNProgrammer
designerNProgrammer

Reputation: 2701

You can always use a absolute position div to 100% width and height with z-index so that it can be a background, then you can insert the image with same css for it. thanks

Upvotes: -1

Sgoldy
Sgoldy

Reputation: 796

background-size: 100% 100%;
background-position: top left;
background-repeat: no-repeat;

should do the trick. Notice - you can combine position & repeat into the initial background attribute

And apply

html, body { min-height: 100%; min-width: 100%; }

Upvotes: 0

cbr
cbr

Reputation: 13660

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

Upvotes: 2

slash197
slash197

Reputation: 9034

Set this for your background image

background-size: cover

Upvotes: 1

Related Questions