I'm facing some challenges with setting the maximum height of a background image within a div. I want the max height to be equal to the actual height of the image, without stretching it. Ideally, if there is excess content in the div, it should stop at the edge of the image and then continue with a background color for the remaining content. Here's the code snippet that I've experimented with:
<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>
Currently, the background image zooms in and expands if there is too much content.