为什么我的背景不显示在 div 容器中？

Question

我正在使用 Fullpage.js，到目前为止添加背景没有问题。出于某种原因，我的背景没有显示在其中一个页面（博客页面）上。我设置了一个背景颜色，看看它是否只是 div，并且背景颜色工作正常。有什么我没看到的吗？

编辑：我为第一张幻灯片使用了相同的文件路径，它工作得很好，所以我知道路径没问题。

CSS:

/*------------------------------------------------------
HEADER PAGE
-------------------------------------------------------*/

.header {
    text-align: center;
    background: url('/img/paint.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.name {
    float: right;
    margin-bottom: 0;
    padding-bottom: 0;
}

.name h1 {
    text-transform: uppercase;
    color: black;
    font-family: 'Oswald', sans-serif;
    font-size: 300%;
}
.name h5 {
    color: grey;
    font-family: 'Yrsa', serif;
    font-size: 150%;
    float: right;
    padding-top: -1%;
    margin-top: -5%;;
}

.social-links {
    float: right;
    padding-top: 10%;
    font-size: 175%;
}

.linkedin {
    color: #1E8BC3;
    transition: all .2s ease-in-out;
}

.github {
    color: black;
    transition: all .2s ease-in-out;
}

.instagram {
    color: #2980b9;
    transition: all .2s ease-in-out;
}

.dribbble {
    color: #FF69B4;
    transition: all .2s ease-in-out;
}

.fa-github:hover {
    transform: scale(1.2);
    color: #222;
    -webkit-transition: all .35s ease-out;
    -moz-transition: all .35s ease-out;
    -o-transition: all .35s ease-out;
    -ms-transition: all .35s ease-out;
    transition: all .35s ease-out;
}

.fa-linkedin:hover {
    transform: scale(1.2);
    color: #43ace2;
    -webkit-transition: all .35s ease-out;
    -moz-transition: all .35s ease-out;
    -o-transition: all .35s ease-out;
    -ms-transition: all .35s ease-out;
    transition: all .35s ease-out;
}

.fa-instagram:hover {
    transform: scale(1.2);
    color: #4ea1d8;
    -webkit-transition: all .35s ease-out;
    -moz-transition: all .35s ease-out;
    -o-transition: all .35s ease-out;
    -ms-transition: all .35s ease-out;
    transition: all .35s ease-out;
}

.fa-dribbble:hover {
    transform: scale(1.2);
    color: #ffadd6;
    -webkit-transition: all .35s ease-out;
    -moz-transition: all .35s ease-out;
    -o-transition: all .35s ease-out;
    -ms-transition: all .35s ease-out;
    transition: all .35s ease-out;
}




/*------------------------------------------------------
ABOUT PAGE
-------------------------------------------------------*/

.about-you h2 {
    font-family: 'Yrsa', serif;
    font-size: 200%;
    text-align: center;
    padding-bottom: 2%;
}

.about-me h2 {
    font-family: 'Yrsa', serif;
    font-size: 200%;
    text-align: center;
    padding-bottom: 2%;
}

.you-text,
.me-text {
    font-family: 'Roboto', sans-serif;
    line-height: 175%;
}

/*-------------  MODEL SLIDE  --------------*/

.model-page {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    width: auto;
    height: auto;
}

/*-------------  APPLE SLIDE  --------------*/

.apple-page {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    width: auto;
    height: auto;
}

/*-------------  DRIBBBLE SLIDE  --------------*/
.dribbble-page {
    background-color: #FF69B4;
}

.dribbble-icon {
    color: white;
    text-align: center;
    font-size: 500%;
}

.info h3 {
    color: white;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    padding-top: 7%;
}

.dribbble-button,
.github-button {
    font-size: 400%;
}


.button-info {
    text-align: center;
    font-size: 300%;
}



/*------------------------------------------------------
BLOG PAGE
-------------------------------------------------------*/

.blog {
    background: url('/img/paint.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

HTML:

<body>
    <div id="fullpage">

        <!-------------------------    HEADER    ----------------------------->

        <div class="section header">
            <div class="container">
                <div class="offset-md-4 name">
                    <h1>temple naylor</h1>
                    <h5>Full Stack Web Developer</h5>
                </div>
            </div>
            <div class="container">
                <div class="offset-md-4 social-links">
                    <a href="https://www.linkedin.com/in/templenaylor"><i class="fa fa-linkedin linkedin"></i></a>
                    <a href="https://github.com/templenaylor"><i class="fa fa-github github"></i></a>
                    <a href="https://www.instagram.com/templecerulean/"><i class="fa fa-instagram instagram"></i></a>
                    <a href="https://dribbble.com/templenaylor"><i class="fa fa-dribbble dribbble"></i></a>
                </div>
            </div>
        </div>

        <!-------------------------    ABOUT    ----------------------------->

        <div class="section #about">

            <div class="container">

                <div class="row">
                    <div class="col-md-12 about-you">
                        <h2>About You</h2>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 you-text">
                        <p>Let's cut the bull - What can I do for you? I am a <strong>Full Stack Developer</strong> that will offer a variety of services. 
                            <br>My main focus however is Front End Development. I create <strong>websites</strong> and <strong>applications</strong> for <strong>everyone</strong>, from a customers personal portfolio to a businesses landing page. <br>I believe in creating with the <strong>users perspective</strong> in mind from start to finish.</p>
                    </div>
                    <div class="col-md-6 you-text">
                        <p>No matter how stunning the typography, images, or content, it is pointless if it cannot be presented with a <strong>intuitive experience</strong> for the user. <br>No matter <strong>your goal</strong>, I will make sure <strong>your story</strong> is told whether that needs to be done with a <strong>website</strong> or <strong>APP</strong>.</p>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12 about-me">
                        <h2>About Me</h2>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 me-text">
                        <p>I am both a <strong>graduate</strong> and <strong>self taught</strong> developer. <br>My knowledge consists of <strong>HTML/CSS</strong>, <strong>JavaScript</strong>, <strong>Angular</strong>, <strong>SQL</strong>, <strong>PHP</strong> &amp; <strong>C#</strong>. <br>I believe in personal growth as well as learning everyday, and coding is one of the many challenges that provides that outlet for me.</p>
                    </div>
                    <div class="col-md-6 me-text">
                        <p>When I am not working on the next <strong>hottest product</strong>, you can find me <strong>reading</strong>, exploring <strong>architecture</strong>, finding new <strong>music</strong>, getting my next <strong>tattoo</strong>, or pursuing my next <strong>dream</strong>.</p>
                    </div>
                </div>
            </div>
        </div>


        <div class="section">
            <div class="slide"><img class="model-page" src="img/modelpage.png">
                <div class="container">
                    <div class="row">
                        <div class="col-xs-12 button-info">
                            <a href="#"><i class="fa fa-dribbble dribbble"></i></a>
                            <a href="#"><i class="fa fa-github github"></i></a>
                        </div>
                    </div>
                </div>
            </div>


            <div class="slide"><img class="apple-page" src="img/applepage.png">
                <div class="container">
                    <div class="row">
                        <div class="col-xs-12 button-info">
                            <a href="#"><i class="fa fa-dribbble dribbble"></i></a>
                            <a href="#"><i class="fa fa-github github"></i></a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="slide dribbble-page">
                <div class="container">
                    <div class="row dribbble-icon">
                        <div class="col-md-12"><i class="fa fa-dribbble"></i></div>
                    </div>

                    <div class="row info">
                        <div class="col-md-12 link-dribbble"><a href="#" style="text-decoration:none"><h3>Please checkout my dribbble profile for more.</h3></a></div>
                    </div>
                </div>
            </div>
        </div>



        <!-------------------------    BLOG    ----------------------------->
        <div class="section blog">Some section</div>


    </div><!--FULLPAGE WRAPPER DIV-->

    <script>
        $(document).ready(function() {
            $('#fullpage').fullpage({
                navigation: true,
                navigationPosition: 'right',
                scrollOverflow: true
            });
        });
    </script>
</body>

如有任何建议，将不胜感激，谢谢！

编辑：我为第一张幻灯片使用了相同的文件路径，它工作得很好，所以我知道路径没问题。

Answer 1

我在 jsfiddle 中看到了你的代码，我认为你提到了错误的图像背景路径。

Answer 2

您的背景图片路径可能有误 - ~尝试在第一个 / 之前添加“..”。

background: url('../img/paint.jpg') no-repeat center center fixed;

基本上，由于图像位于 css 文件夹之外的文件夹中，您需要退出 css 文件夹，然后进入 img 文件夹才能获取你想要的形象。

Answer 3

似乎 fixed 属性是不必要的，因为 fullpage 插件的功能。我建议从背景中删除 fixed 属性。因此，您的博客 class-- 在您的 css-- 中应该看起来像这样：

.blog {
    background: url(Path_to_image) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

或者，

.blog {
   background-image: url(Path_to_image);
   background-repeat   : no-repeat;
   background-position : center center;
   background-size     : cover;

}

为什么我的背景不显示在 div 容器中？

Why won't my background show within div container?

html

javascript

css

jquery

fullpage.js