div height based on background image

Question

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

Actually, no, but it has to be on the right place :) And it has to determine height of whole section `.container-fluid` (it's one page design). — Karolína Vyskočilová, Mar 22 '15 at 17:03
I was talking about something like this http://jsfiddle.net/akshay7/vet2tq5e/ — Akshay, Mar 22 '15 at 17:03
But how to cover it on the whole width and there needs to be a text over it. — Karolína Vyskočilová, Mar 22 '15 at 17:16

guest271314 · Accepted Answer · 2015-03-22T17:42:34.257

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

edited Mar 22 '15 at 17:42

answered Mar 22 '15 at 17:12

guest271314

1
15
104
177

In Chrome console it returns me: "Uncaught TypeError: undefined is not a functionscripts.js?ver=4.1.1:10 (anonymous function)" Some issue of Wordpress? Do you know how to solve it? – Karolína Vyskočilová Mar 22 '15 at 17:21
Try substituting `jQuery` for `$` at $(".uvod");` -> `jQuery(".uvod");` ? – guest271314 Mar 22 '15 at 17:24
Helped, but: `Uncaught TypeError: Cannot read property 'split' of undefinedscripts.js?ver=4.1.1:12 (anonymous function)` – Karolína Vyskočilová Mar 22 '15 at 17:30
Hm, still the same error. I'm not good in jquery, but are you sure that you get in 'split' correct value? – Karolína Vyskočilová Mar 22 '15 at 17:48
Is `undefinedscripts.js?ver=4.1.1:12` a file loaded at page ? Is `js` file named `undefined` , or "undefined" ? – guest271314 Mar 22 '15 at 17:56
I'm sorry, I've copied that and it got mixed together: `Uncaught TypeError: Cannot read property 'split' of undefined` and `scripts.js?ver=4.1.1:31` (that point on the line with split function. – Karolína Vyskočilová Mar 22 '15 at 17:59
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/73536/discussion-between-guest271314-and-kybernaut-cz). – guest271314 Mar 22 '15 at 18:53
What does `console.log(container, container.css("background"))` return ? – guest271314 Mar 22 '15 at 19:26
I'm in chat, sorry. It returns `undefined` – Karolína Vyskočilová Mar 22 '15 at 19:34

div height based on background image

1 Answers1