Two column layout with sidebar and responsive image and text - css

Question

I have a layout with 2 columns : a left sidebar and a main content.
The sidebar is 25% of the total, (the main is 75% !).
In the main content bloc there should be an image with 6 areas (each 25% width of the full layout width).
The layout has to be fluid/responsive.
My problem is that obviously, when the viewport is not full width, the image is resized. But
the height of the sidebar doesn't follow the image height resizing.
For the moment, i've set a absolute positioned image . I haven't manage to set it correctly as (responsive) background image. The sidebar block height are obviously wrong (set to image height/2) but i don't see how to have responsive height (auto or 50%
the text in the blocks doesn't "follow" the image resizing
How can i achieve this ? I would like the solution to be valid for IE 8+. I know, i'm asking too much
I've done a jsfiddle to show the principle (there is no breakpoint here, at the moment)
<div id="page">
<div id="main">
<div id="main-content">
<div id="primary">
<div id="content">
<img src="http://s18.postimg.org/a8ary6c8p/image.gif" class="bgimg responsiveimg">
<div class="bloc bloc1">Content for bloc 1</div>
<div class="bloc bloc2">Content for bloc 2</div>
<div class="bloc bloc3">Content for bloc 3</div>
<div class="bloc bloc4">Content for bloc 4</div>
<div class="bloc bloc5">Content for bloc 5</div>
<div class="bloc bloc6">Content for bloc 6</div>
</div>
</div>
<div id="secondary">
<div class="sbloc sec_bloc1">Some content</div>
<div class="sbloc sec_bloc2">Some content</div>
</div>
</div>
</div>
<div id="footer">Some footer content</div>
</div>
I'm working on a Wordpress child template
----- EDIT -
Since the "real" image will be a actual picture of people (with a colored grid overimposed into the jpg - i'm not the graphist :( ), so it won't be an option.
The image will be responsive : no deformation but homothetic resizing.
i would like to have the sidebar responding to the height of the image (one image, not a repeated one), with each of two part of the sidebar (equal height), resizing to stay aligned with the grid on the image.
In fact my fiddle is questionnable, because the default viewport is small : i would like a responding version where the result is "always" like when the viewport is entirely stretched.

Answer 1

In order to keep the image aspect ratio, we need to set the height of each sidebar to match the height of the responsive image. I'm using jQuery here.
var h = $('.bgimg').height();
$('.sbloc').css('height', h);
Due to your complex layout 1 sidebar + 3 text blocks in a row, and 2 rows total. So the height of the container #content would be 2x of image height.
We need the inline image there with CSS set to max-width: 100%; height: auto; for responsiveness. But we actually set it to visibility: hidden; (hidden, but keep the space), instead we use the same image as background and set it to contain.
$('.bgimg').css('visibility', 'hidden');
$('#content').css({
'height' : h * 2,
'background' : 'url(http://s18.postimg.org/a8ary6c8p/image.gif)',
'background-size' : 'contain'
});
Then, we combine ready() + resize() functions, the entire script is:
$(document).ready(myfunction);
$(window).on('resize', myfunction);
function myfunction() {
var h = $('.bgimg').height();
$('.sbloc').css('height', h);
$('.bgimg').css('visibility', 'hidden');
$('#content').css({
'height' : h * 2,
'background' : 'url(http://s18.postimg.org/a8ary6c8p/image.gif)',
'background-size' : 'contain'
});
}
Lastly, remove the background color from the blocks, as we use background image.
.bloc1, .bloc3, .bloc5{/* background-color: red */}
.bloc2, .bloc4, .bloc6{/* background-color: green */}
jsfiddle
EDIT
The only image should cover the the entire content area (two rows). Minimal jQuery code update as needed.
$(document).ready(myfunction);
$(window).on('resize', myfunction);
function myfunction() {
var h = $('.bgimg').height();
$('.sbloc').css('height', h / 2);
$('.bgimg').css('visibility', 'hidden');
$('#content').css({
'height' : h,
'background' : 'url(http://s18.postimg.org/a8ary6c8p/image.gif)',
'background-size' : 'contain'
});
}
jsfiddle