Michael Westwort Michael Westwort - 29 days ago 14
CSS Question

Adding a background to an empty div - specifying the height impossible

I have an HTML layout with four divs: top left, top right, bottom left and bottom right.

Example: http://www.arkat-bayern.de/arkat-bayern.html

The top-left div is empty. Its width is fixed using the CSS width property, its height is determined by the content of the top-right div. I want to set a background to the top-left div (or add an image with height: 100% as content as it is shown in the example at the moment). Former discussions result in the advice that the height of the empty div must be specified however I cannot apply that solution.

So how can I make the empty div as high as it is determined by the adjacent div?

Answer

You can set a background image with css and then have it cover the available space like:

.top-left {
  background:url('/images/image-name.jpg') no-repeat;
  background-size:cover;
  background-position:center;
}

This will work as long as you have the height set. If you can not figure out how to set the height to equal the div next to it you can do that with Jquery like so:

$(function() {    
  var topRight = $('.top-right').height();
  $('.top-left').height(topRight);
});

As always make sure Jquery is loaded prior to including the above code.