Wordpress二十二个全屏响应背景图片

我刚开始用Wordpress二十十二个儿童主题进行前端开发。Wordpress二十二个全屏响应背景图片

我想让我的背景全屏响应。我跟随这篇文章：Full-screen responsive background image，因为它正是我要找的。

但是，当我复制这个CSS代码粘贴到我的style.css：

img.bg { 
    /* Set rules to fill background */ 
    min-height: 100%; 
    min-width: 1024px; 

    /* Set up proportionate scaling */ 
    width: 100%; 
    height: auto; 

    /* Set up positioning */ 
    position: fixed; 
    top: 0; 
    left: 0; 
} 

@media screen and (max-width: 1024px) { /* Specific to this particular image */ 
    img.bg { 
    left: 50%; 
    margin-left: -512px; /* 50% */ 
    } 
}

它不工作。感觉像img.bg不存在。这是我的current website。

请帮忙！我不能没有这个上移动，我晚点:( 谢谢您的时间

来源

2013-08-17 hanburger

有一个很好的CSS方式这样做：

div 
{ 
position: absolute; width: 100%; height: 100%; 
background-image:url('smiley.gif'); 
background-repeat:no-repeat; 
background-size:cover; 
}

的关键是后台尺寸：盖;行 - 这将调整无论什么窗口大小瞧瞧吧http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=cover

来源

2013-08-17 02:23:20 MattLoszak

OMG我爱你！谢谢！！！这工作就像一个魅力！你是一个很好的帮助！ – hanburger

需要2使用JScript的instd 作为exmpl：！

 var theWindow  = jQuery(window), 
      jQuerybg    = jQuery("#bg"), 
      aspectRatio  = jQuerybg.width()/jQuerybg.height(); 
     function resizeBg() {   
      if ((theWindow.width()/theWindow.height()) < aspectRatio) { 
       jQuerybg 
        .removeClass() 
        .addClass('bgheight');    
      } else { 
       jQuerybg 
        .removeClass() 
        .addClass('bgwidth');    
      } 

     } 

     theWindow.resize(function() { 
      resizeBg(); 
     }).trigger("resize");

来源

2013-08-17 02:21:03 user2691132

。谢谢！但我仍然太新颖了解jscript ...如果有人试过这个并且工作，请代表这个:) – hanburger

Wordpress二十二个全屏响应背景图片

回答

相关问题