Div Hintergrund Bild maximale Größe

Question

Ich habe einige Probleme mit der Einstellung der maximalen Höhe eines Hintergrundbildes in einem div. Die maximale Höhe sollte die Höhe des Bildes und nicht größer als das sein. Es wird nur auf das Bild gezoomt, wenn zu viel Inhalt in der div ist. Wenn das Hintergrundbild endet, möchte ich mit einer Hintergrundfarbe für den Rest meines Inhalts fortfahren. Hier ist der Code, ich habe versucht,

<style> 
    .profilbg { 
     background: url(<?php echo $uin->backgroundimg; ?>); 
     background-repeat: no-repeat; 
     background-size:cover; 
    } 
    .profilen { 
     width: 100%; 
     text-align: left; 
     clear: both; 
    } 
</style> 
<div class="profilen"> 
    <div class="profilbg"> 
     <?php echo nl2br($uin->profilen); ?> 
    </div> 
</div> 

Mit diesem Code das Hintergrundbild nur in zoomt und immer größer, wenn es zu viel Inhalt ist.

Answer 1

Ich weiß, das alreay gelöst wird, aber es wäre leicht, Whit background-size: 100%; zu tun, wie Sie es bedecken verwenden wird die gesamte Seite abdecken, aber wenn Sie Verwenden Sie 100% es wird die Seite mit dem Hintergrund ohne Geting gezoomt Inn

abdecken

Answer 2

können Sie diese CSS-Regel Bild für den Hintergrund:

.profilbg { 
    background: url(<?php echo $uin->backgroundimg; ?>) no-repeat #000 // Your bg color; 
    background-size: 100%; 
} 

Dieses Hintergrundbild 100% Breite nur geben, ohne Höhe und die Hintergrundfarbe nach Bild wird automatisch angezeigt.

Answer 3

.profilbg { 
background: url(<?php echo $uin->backgroundimg; ?>) no-repeat #000 ; 
background-size:100%; 

} 

oder

.profilbg { 
    background: url(<?php echo $uin->backgroundimg; ?>) no-repeat #000 ; 
    max-height:100%; 

    } 

es versucht ......

Answer 4

ändern CSS-Regel das, und es wird das Bild in voller Breite, so hoch wie das Seitenverhältnis machen macht es, an der Spitze ausrichten und den verbleibenden Platz mit roten

.profilbg { 
    background: #f00 url(<?php echo $uin->backgroundimg; ?>); 
    background-repeat: no-repeat; 
    background-size: 100% auto; 
    background-position: center top; 
} 

mit Hintergrund Stenografie

füllen

.profilbg { 
    background: #f00 
       url(<?php echo $uin->backgroundimg; ?>) 
       no-repeat 
       center top/100% auto; 
} 

Probe

div { 
 
    background: #f00 
 
       url(http://www.placehold.it/1000x150) 
 
       no-repeat 
 
       center top/100% auto; 
 

 
    /* temp for test */ 
 
    height: 300px; 
 
}

<div></div>