Scalable Background image with min and max constraints

I am looking for a solution to an odd problem with a difficult client. The site is built in Wordpress using a variation of a fluid So .container_16 is the containing CSS class. Let's say the class looks like this: .container_16 { background: url(http://image.jpg) no-repeat; min-width:960px; min-height:614px; max-width:1200px; max-height:800px; margin-left:auto; margin-right:auto; } I'd like the full div to scale between a max and min proportional size. I can't figure this out trying a few of the JQuery plugins that I've found like backstretcher. I was using Supersized which worked great expect there is no way that I can figure out to add a max size or have the whole thing center when it reaches a max size which is why I am looking at using a background div. Any help with this greatly appreciated as I have a client breathing down my neck and I am a designer, not a developer. Thanks! ------- Here is the code I found that appears to be working: $(function(){ $('.container_16 *').css({'background':'transparent','zIndex':2,'position':'relative'}); $('.container_16').css({'overflow':'hidden','position':'relative'}); var containerWidth = $('.container_16').innerWidth(); var bgimgurl = $('.container_16').css('backgroundImage').replace(/url\(|\)|"|'/g,""); var img = $('').css({'position':'absolute','left':0,'top':0,'zIndex':1}); $('.container_16').css({'background':'transparent'}).append(img);});

以上就是Scalable Background image with min and max constraints的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » jQuery 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准