html - Optimizing background gif for mobile phones? -


so, have gif running, takes whole screen, background. how ever, when checked site on phone, whole screen wasn't filled , half way down black. http://goroam.org here's link, how make phones have gif takes whole screen,and text in middle if viewing site laptop?

here solution..

making background-size: 100% 100%; make image full screen

and make h1 responsive screen auto adjust screen..

here code:

html {     height: 100%; }  body {     color: #eeeeee;     font: 24px/1.3 "arial";     min-height: 100%;     background: url("http://media.giphy.com/media/13bggh9vnedsua/giphy.gif") no-repeat scroll 0 0 / 100% 100% #000000;     height: auto;     margin: 0;     width: 100%; }  h1 {     color: #f0f0f0;     font-family: "belta bold";     font-size: 212px;     left: 0;     margin: -120px 0 0;     position: absolute;     text-align: center;     top: 50%;     width: 100%; } 

if want perfect solution use css media queries..

here fiddle http://jsfiddle.net/krunalp1993/53zat/

using media queries

@media screen , (max-width:1024px){    h1{    font-size:62px;    margin-top:-31px; } } 

here fiddle using media queries http://jsfiddle.net/krunalp1993/53zat/2/

hope hepls :)


Comments

Popular posts from this blog

python - Subclassed QStyledItemDelegate ignores Stylesheet -

java - HttpClient 3.1 Connection pooling vs HttpClient 4.3.2 -

SQL: Divide the sum of values in one table with the count of rows in another -