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
Post a Comment