CODEWITHSUNDEEP
jquerycss
Karolína Vyskočilová
Karolína Vyskočilová

Reputation: 1325

div height based on background image

I need to set the height of <div> based on background image which is contained, could anybody help me how to do that? In the div is some text.

I would live either a help how to achieve that in my code in bootply or any other approach how to achieve that would be also great.

I've found this stackoverflow already, but it didn't worked for my - it's used in bootstrap template used for a Wordpress. Thanks a lot!

Code:

<div class="container-fluid" id="uvod">
    <div class="row clearfix uvod silver"><div class="container">
        <div class="col-md-12 column">
            <div class="text-center"><h2>HEADER 2</h2></div>
            <div class="text">Some text goes here.</div>
        </div>
    </div></div>
</div>

CSS:

.uvod {
    background:url('http://disk.kybernaut.cz/header.png') no-repeat top center;
    height: 550px;
    padding-top: 250px;
    background-size: contain;
}

Upvotes: 0

Views: 716

Answers (1)

guest271314
guest271314

Reputation: 1

Try

var container = $(".uvod");
var url = container
          .css("background")
          .split(/\s/)
          .map(function(value) {
            return /url/.test(value) 
            ? value.replace(/url\(|\)/g, "")
            : null
          }).filter(Boolean)[0];


var img = new Image;
img.onload = function() {
  container.height(this.height);
  console.log(container.height());
};
img.src = url;
.uvod {
    background:url('http://disk.kybernaut.cz/header.png') no-repeat top center;
   /* height: 550px; */
    padding-top: 250px;
    background-size: contain;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="container-fluid" id="uvod">
    <div class="row clearfix uvod silver"><div class="container">
        <div class="col-md-12 column">
            <div class="text-center"><h2>HEADER 2</h2></div>
            <div class="text">Some text goes here.</div>
        </div>
    </div></div>
</div>

See .height()

Upvotes: 1

Related Questions