How to display a gif fullscreen for a webpage background

Question

I m trying to make a GIF fit my whole screen  but so far its just a small square that is on my screen while the rest is white  However  I want it to take up all the space    Any ideas

User · Answer

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.

Here's more info about the property:

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

Hope it helps :)

User · Answer

This should do what you re looking for   CSS   html  body       height  100       margin  0      gif-container     background  url  image gif   center    background-size  cover     height  100       HTML    lt div class  gif-container  gt  lt  div gt

User · Answer

IMG Method  If you want the image to be a stand alone element  use this CSS    selector       width 100       height 100       With this HTML    lt img src  folder image gif  id  selector   gt    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

User · Answer

In your CSS Style tag put this   body     background  url  yourgif gif   no-repeat center center fixed    background-size  cover

User · Answer

if it s background  use background-size  cover    x000D   x000D  body  x000D      background-image  url  http   i stack imgur com kx8MT gif    x000D      background-size  cover  x000D       x000D       x000D       x000D      height  100vh  x000D      padding 0  x000D      margin 0  x000D    x000D   x000D   x000D

User · Answer

if you re happy using it as a background image and CSS3 then  background-size  cover  would do the trick

[html] How to display a gif fullscreen for a webpage background?

Examples related to html

Examples related to css

Examples related to gif