Div背景图像最大尺寸

Question

I have some problems with setting the max height of a background image in a div . The max height should be the height of the image and not larger than that. It's just zooming in on the image if there's to much content in the div . When the background image ends I want it to continue with a background color for the rest of my content. Here is the code I've tried

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

With this code the background image is just zooming in and getting bigger if there's to much content.

Answer 1

You can use this CSS rule for background image:

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

This will give your background image 100% width only, not including height and after image the background color will automatically appear.

Answer 2

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

}

or

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

    }

try it......

Answer 3

Change your CSS rule to this, and it will make the image be full width, as high as its aspect ratio makes it, align at the top and fill the remaining space with red

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

Using background shorthand

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

Sample

 div { background: #f00 url(http://www.placehold.it/1000x150) no-repeat center top / 100% auto; /* temp for test */ height: 300px; } 

 <div></div> 

Answer 4

I know this alreay is solved but it would be easy to do whit background-size: 100%; As you are using cover it will cover the Whole page but if you use 100% it will cover the page whit the background whitout geting zoomed inn