css - 响应式背景，不显示任何背景

Question

我需要一些关于响应式背景的 css 属性的帮助，我补充说；

/* =Global
----------------------------------------------- */
homeContent {
    height: 100%;
    width: 100%;
    background-image: url(http://mariovital.com/zaask/wpcontent/uploads/2014/05/fundo.png);
    background-repeat: no-repeat;
    position: relative;
    margin: 0 auto;
}

#mainBG {
    background-image: url(http://mariovital.com/zaask/wp-content/uploads/2014/05/fundo.png);
    background-repeat: no-repeat;
    no-repeat scroll;
    background-position:center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;*/
}

还有媒体的响应式CSS

@media only screen and (max-width: 1024px) and (orientation:landscape) {
    #mainBG { 
    background: url(http://mariovital.com/zaask/wp-content/uploads/2014/05/fundo.png) 50% 0 no-repeat scroll !important;
    background-position:center;
    background-size: cover;
     -webkit-background-size: cover;
         -moz-background-size: cover;
-o-background-size: cover;
 }
}
 @media only screen and (min-width: 768px) and (max-width: 991px) {
 #mainBG { 
   background: url(http://mariovital.com/zaask/wp-content/uploads/2014/05/fundo.png) 50% 80% no-repeat scroll !important;
background-position:center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
 }
}

@media only screen and (min-width: 0px) and (max-width: 767px) {
   #mainBG { 
      background: url(blank.png) 75% 80% no-repeat scroll !important;
  background-position:center;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
 } 
}

我相信这里一切正常...但是我的网页上没有显示我做错了什么吗？

http://mariovital.com/zaask

任何帮助将不胜感激!thz 进阶

Answer 1

您的#mainBG 没有维度。尝试:

#mainBG {
    position: absolute; 
    width: 100%;
    height: 100%;
}