Wordpress二十二十全屏响应背景图像

问题描述：

I have just started front-end development with Wordpress Twenty Twelve child theme.

I want to make my background full-screen responsive. I followed from this post: Full-screen responsive background image because it is exactly what I'm looking for.

But when I copy and paste this css code into my 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% */
  }
}

It doesn't work. It feels like img.bg doesn't exist. This is my current website.

Please help! I cannot move on without this and I'm behind schedule :( Thank you for your time!

我刚开始使用Wordpress Twenty Twelve儿童主题进行前端开发。 p> 我想让我的背景全屏响应。我从这篇文章开始： Full- 屏幕响应背景图像，因为它正是我正在寻找的。 p>

但是当我将这个css代码复制并粘贴到我的style.css中时： p> \ n

  img.bg {
 / *设置规则以填充背景* / 
最小高度：100％; 
最小宽度：1024px; 
 
 / *设置比例 缩放* / 
宽度：100％; 
高度：自动; 
 
 / *设置定位* / 
位置：固定; 
顶部：0; 
左：0; 
} 
  
 @ media screen and（max-width：1024px）{/ *特定于此特定图像* / 
 img.bg {
 left：50％; 
 margin-left：-512px;  / * 50％* / 
} 
} 
  code>  pre> 
 
 它不起作用。 感觉img.bg不存在。
这是我的当前网站。 p> 
 \  n 
请帮忙！ 没有这个我不能继续前进，我落后于时间表:( 
谢谢你的时间！ p> 
  div>

答

There's a nice css way of doing this:

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

The key is the background-size: cover; line - it will resize no matter what the window size. Check it out at http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=cover

答

You need 2 use the jscript instd. As 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");

Wordpress二十二十全屏响应背景图像

相关推荐