我刚刚开始使用Wordpress Twenty Twelve 12儿童主题进行前端开发。

我想让我的背景全屏响应。
我遵循了这篇文章: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

请帮忙!没有这个我不能继续前进,我落后于时间表:(
感谢您的时间!

最佳答案

有一种不错的CSS方式:

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


关键是background-size:封面;行-无论窗口大小如何,它都会调整大小。在http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=cover签出

09-07 13:11