Geek asks and answers

How to display full screen gif mode for web page background?

I am trying to make GIF suitable for the whole screen, but for now its a small square that is on my screen, while the rest are white. However, I want him to take up all the space.

Any ideas?

+3
source share
6 answers

if used, use background-size: cover;

demonstration

background-image: url('source.gif');
background-size: cover;
+10
source

IMG Method

If you want the image to be self-contained, use this CSS:

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

Using this HTML:

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

Fiddle

, img . , , . , . .

, , CSS:

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

Fiddle

:

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

Fiddle

+6

GIF :

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

URL- GIF. background-position: center , background-size: cover . background-size: contain, 100% , - .

:

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

Hope this helps :)

+1
source

if you are happy to use it as background image and CSS3 then background-size: cover;do the trick

0
source

This should do what you are looking for.

CSS

html, body {
    height: 100%;
    margin: 0;
}

.gif-container {
  background: url("image.gif") center;
  background-size: cover;

  height: 100%;
}

HTML:

<div class="gif-container"></div>
0
source

In the CSS Style tag, put this:

body {
  background: url('yourgif.gif') no-repeat center center fixed;
  background-size: cover;
}
0
source

More articles:


All Articles