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二十二個全屏響應背景圖片

回答

相關問題