why does all of my background images not display

Question

I have a div and I want that div to only have a background images, I have set the background in the css and have given it a height but for some reason it won't all display not matter what I set the right to.

Here is my code

 <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> 

Here is my 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

It works for me? I'm guessing your not calling the URL correctly. Do you have a link to the site?

 #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>