html - CSS scaling background bug -
i want cloud background scale within box. possible?
currently looks this: http://freecns.yanlu.de/cumulus1/
somehow background scales on limited box. have tried several ways figure out not find bug. not sure if possible this.
i used following html:
<div class="backgroundbox"> <div class="box_animation"></div> <ul class="nostyle inline center"> <li class="bboxcontent left">freecns cumulus includes on 100 weather specific icons shipped png, pdf, eps , svg. <br /></li> <li class="bboxvideo"></li> </ul> </div>
and css:
.backgroundbox { position: relative; z-index: 0; height: 295px; width: 816px; border-radius: 16px; margin-top: 48px; margin-left: auto; margin-right: auto; background: url('http://www.yanlu.de/files/images/cloudbg.png') no-repeat center; padding-top: 81px; } .bboxcontent { width: 295px; font-family: helveticaneue-light; font-size: 18px; color: #ffffff; line-height: 22px; text-shadow: 0px 1px 2px rgba(0,0,0,0.75); margin-right: 8px; display: table-cell; vertical-align: middle; } .bboxvideo { height: 214px; border-radius: 4px; border: 4px solid #ffffff; color: #ffffff; -moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.75); -webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.75); box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.75); margin-left: 8px; display: table-cell; vertical-align: middle; } .box_animation { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background: url('http://www.yanlu.de/files/images/cloudbg.png'); -webkit-background-size: cover; -webkit-transition-property: -webkit-transform; -webkit-animation-name: scale; -webkit-animation-duration: 40s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; }
if understand problem, can set overflow: hidden;
.backgroundbox
, snap size of box
Comments
Post a Comment