html – How to display a gif fullscreen for a webpage background?

html – How to display a gif fullscreen for a webpage background?

if its background, use background-size: cover;

body{
    background-image: url(http://i.stack.imgur.com/kx8MT.gif);
    background-size: cover;
    
    
    
    height: 100vh;
    padding:0;
    margin:0;
}

IMG Method

If you want the image to be a stand alone element, use this CSS:

#selector {
    width:100%;
    height:100%;
}

With this HTML:

<img src=folder/image.gif id=selector/>

Fiddle

Please note that the img tag would have to be inside the body tag ONLY. If it were inside anything else, it may not fill the entire screen based on the other elements properties. This method will also not work if the page is taller than the image. It will leave white space. This is where the background method comes in

Background Image Method

If you want it to be the background image of you page, you can use this CSS:

body {
    background-image:url(folder/image.gif);
    background-size:100%;
    background-repeat: repeat-y;
    background-attachment: fixed;
    height:100%;
    width:100%;
}

Fiddle

Or the shorthand version:

body {
    background:url(folder/image.gif) repeat-y 100% 100% fixed;
    height:100%;
    width:100%;
}

Fiddle

html – How to display a gif fullscreen for a webpage background?

You can set up a background with your GIF file and set the body this way:

body{
background-image:url(http://www.example.com/yourfile.gif);
background-position: center;
background-size: cover;
}

Change background image URL with your GIF. With background-position: center you can put the image to the center and with background-size: cover you set the picture to fit all the screen. You can also set background-size: contain if you want to fit the picture at 100% of the screen but without leaving any part of the picture without showing.

Heres more info about the property:

http://www.w3schools.com/cssref/css3_pr_background-size.asp

Hope it helps 🙂

Leave a Reply

Your email address will not be published.