HTML/CSS Hintergrund wiederholen Ausgabe

Question

Bitte können Sie mir sagen, warum dieser Code das Hintergrundbild am Ende der Seite Dash Task wiederholt, und warum die 3. <span class="price">$1000 p/night</span> ist immer noch sichtbar, bevor unten <div> geklickt wird?

$("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

Nur background-repeat: no-repeat verwenden. So einfach und doch so mächtig.

Answer 2

Alle Absätze sind unter eigenem Vater sichtbar, aber die erste und zweite sind unter der nächsten Box und unsichtbar, aber nicht die letzte. Das letzte Div, mit seinem Absatz <div class="plane"><p>...</p></div> erstellen Sie einen sichtbaren Raum nach.

Fügen Sie eine overflow:hidden; zu Ihrem div flintstones/hobbit/plane um zu beheben.