html - 为什么我的所有背景图片都不显示

Question

我有一个 div，我希望那个 div 只有背景图片，我已经在 css 中设置了背景并给了它一个高度，但出于某种原因，无论我设置了什么，它都不会全部显示到。

这是我的代码

<div id="container">

    <div id = "church">


<a href="church.php"><img src="images/church.png"alt="church"/></a>



<h2>Come to Church</h2>

<p>We would love to meet you! Find out what's happing each Sunday and how to get here.</p>

    </div>


        <div id = "whatson">

<a href="whatson.php"><img src="images/whatson.png"alt="church"/></a>

<h2>What's On?</h2>

<p>Find out what we have going on within our church and why not come along.</p>


</div>

        <div id = "getintouch">

<a href="contact.php"><img src="images/getintouch.png"alt="church"/></a>

<h2>Get In Touch</h2>

<p>Have a question? why not get in touch</p>

</div>
</div>


<div id = "podcast">



</div>

这是我的CSS

#podcast {

    background-image: url("images/iStock_000033667452_Large.jpg");
    background-position: 0px 350px;
     background-repeat: repeat-x;
    background-size: 800px 575px;
    height: 500px;
}


#church
{
    padding-left: 100px;
    padding-top: 40px;
    padding-bottom: 20px;
    width: 200px;
   float: left;
    line-height: 1.5;
}

#whatson

{
    padding-left: 100px;
    padding-top: 40px;
    padding-bottom: 20px;
    width: 200px;
    float: left;
    line-height: 1.5;
}

#getintouch

{
    padding-left: 100px;
    padding-top: 40px;
    padding-bottom: 20px;
    width: 200px;
    float: left;
    line-height: 1.5;
}

Answer 1

它对我有用吗？我猜你没有正确调用 URL。您有该网站的链接吗？

#podcast {

    background-image: url("http://placehold.it/600x300&text=placehold.it+rocks!");
    background-position:50%;
    background-size:cover;
    height: 500px;
}


#church
{
    padding-left: 100px;
    padding-top: 40px;
    padding-bottom: 20px;
    width: 200px;
   float: left;
    line-height: 1.5;
}

#whatson

{
    padding-left: 100px;
    padding-top: 40px;
    padding-bottom: 20px;
    width: 200px;
    float: left;
    line-height: 1.5;
}

#getintouch

{
    padding-left: 100px;
    padding-top: 40px;
    padding-bottom: 20px;
    width: 200px;
    float: left;
    line-height: 1.5;
}

<div id="container">

    <div id = "church">


<a href="church.php"><img src="images/church.png"alt="church"/></a>



<h2>Come to Church</h2>

<p>We would love to meet you! Find out what's happing each Sunday and how to get here.</p>

    </div>


        <div id = "whatson">

<a href="whatson.php"><img src="images/whatson.png"alt="church"/></a>

<h2>What's On?</h2>

<p>Find out what we have going on within our church and why not come along.</p>


</div>

        <div id = "getintouch">

<a href="contact.php"><img src="images/getintouch.png"alt="church"/></a>

<h2>Get In Touch</h2>

<p>Have a question? why not get in touch</p>

</div>
</div>


<div id = "podcast">



</div>