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

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>