0

Wordpress Twenty Twelve 子テーマでフロントエンド開発を始めたばかりです。

背景をフルスクリーンレスポンシブにしたい。この投稿からフォローしました：フルスクリーンのレスポンシブ背景画像は、まさに私が探していたものだからです。

しかし、この 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 が存在しないような気がします。これは私の現在のウェブサイトです。

助けてください！これがないと先に進めず、予定より遅れています :( お時間をいただきありがとうございます！

4

2 に答える 2

0

jscript instd を 2 つ使用する必要があります。例として：

        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-17T02:21:03.897 に答える
0

これを行う素敵なcssの方法があります：

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

重要なのは background-size: cover; です。行 - ウィンドウのサイズに関係なくサイズが変更されます。http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=coverでチェックしてください。

于 2013-08-17T02:23:20.087 に答える