HTML / CSS背景重复问题

Question

Please can you tell me why this code is repeating the background image at the bottom of page Dash Task , and why the 3rd <span class="price">$1000 p/night</span> is still visible before bottom <div> is clicked?

 $("div").on('click', function() { $(this).toggleClass('show-description'); }); 

 body { background: url("http://i.imgur.com/AXRyd9w.jpg"); background-size: cover; background-position: center; max-width: 800px; font-family: Helvetica, sans-serif; margin: 0 auto; } div { height: 350px; background-size: cover; position: relative; max-width: 800px; margin: 40px 15px; border: solid black; border-width: 3px 0px 0px 0px; border-top-left-radius: 20px; border-top-right-radius: 20px; text-align: justify; } h1 { text-align: center; font-family: 'Lobster', cursive; font-size: 100px; margin: 25px 0 -10px 0; } h2 { text-align: center; font-family: 'Quicksand', sans-serif; margin: 25 0 -10 0; } p { font-family: Arial; line-height: 25px; margin: 0 auto; padding: 10px; color: rgba(255,255,255,1); background: rgba(70,0,0,1); background: linear-gradient(bottom, rgba(70,0,0,1), rgba(70,0,0,.7)); background: -webkit-linear-gradient(bottom, rgba(70,0,0,1), rgba(70,0,0,.7)); background: -moz-linear-background(bottom, rgba(70,0,0,1), rgba(70,0,0.7)); position: absolute; bottom: 0; height: 20px; letter-spacing: .5; } small { opacity: 0; } .show-description p { height: 180px; background: rgba(70,0,0,1); background: linear-gradient(bottom, rgba(0,0,0,1), rgba(70,0,0,.7)); background: -webkit-linear-gradient(bottom, rgba(0,0,0,1), rgba(70,0,0,.7)); background: -moz-linear-background(bottom, rgba(0,0,0,1), rgba(70,0,0.7)); font-size: 26px; } .show-description small { opacity: 1; font-size: 14px; line-height: 20px; } .flintstones { background: url("http://i.imgur.com/5v4yJbe.png?1"); } .hobbit { background: url("http://i.imgur.com/IF2IhA0.png?1"); } .plane { background: url("http://i.imgur.com/AwDgcdK.png?1"); } .price { float: right; font-size: 16px; font-family: 'Quicksand', sans-serif; opacity: 1; } @media (max-width: 600px) { h1 { font-size: 40px; margin: 10px 0 10px 0; } h2 { font-size: 16px; margin: 10px 0 -5px 0; } div { margin: 20px 10px; } p { font-size: 14px; } small { font-size: 11px line-height: 3px; } .price { font-size: 12px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <link href="https://fonts.googleapis.com/css?family=Lobster|Quicksand" rel="stylesheet"> <h1>Catley's Cribs</h1> <h2>Luxury homes and apartments</h2> <div class="flintstones"> <p>Make your bed rock!</br></br><small>Travel back in time to this Flinstones inspired getaway nestled away in the heart of Lincolnshire. Just a 15 minute walk from Grimsby train station.</br><span class="price">$700 p/night</span></small></p> </div> <div class="hobbit"> <p>Welcome to MiddleEarth!</br></br><small>Orcs, goblins, wizards and elves your kinda thing? Why not get in touch with your Gandalf in our hobbit themed holiday home, a stone's throw from Sheffield City Centre.</br><span class="price">$500 p/night</span></small></p> </div> <div class="plane"> <p>Come fly with me!</br></br><small>Are you a real sucker for a long haul flight, well now you can spend 100% of your holiday time nestled away in your very own economy class cabin. With fully functioning toilets and emergency exits, this aero-partment is sure to blow you away.</br><span class="price">$1000 p/night</span></small></p> </div> 

Answer 1

All the paragraphs are visible under own father, but the first and second are under the next box and invisible, but not the last. The last div, with his paragraph <div class="plane"><p>...</p></div> create a visible space after.

Add an overflow:hidden; to your div flintstones/hobbit/plane to fix.

Answer 2

Just use background-repeat: no-repeat . So simple yet so powerful.