Question

Heres the site: http://designobvio.us/portfolio/body.html

I’ve tried css3, % base. Cannot seem to get this background image to resize when the browser resizes

I’m trying to mimic this layout: http://www.googlezeitgeist.com/en/top-searches/rebecca_black

HTML:

<section class="bodySection">
<div id="body-wrapper" class="class="">
    <div id="me"></div>
    <div id="pattern"></div>
</div>
<div class="clearfix"></div>
</section><!--end of bodySection-->

CSS

html, body, #body-wrapper, .bodySection {height: 100%;}
#body-wrapper{
position: relative;
width:43%;
height: 100%;
}
#body-wrapper #me{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: url('http://designobvio.us/portfolio/img/Me.jpg') repeat-y;
z-index: 1;
-o-background-size:99% auto;
-webkit-background-size:100% auto;
-moz-background-size:99% auto;
background-size:100% auto;
    -webkit-transition: all 0.20s ease-out;
    -moz-transition: all 0.20s ease-out;
    -o-transition: all 0.20s ease-out;
    transition: all 0.20s ease-out;
}
#body-wrapper #pattern{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: url('http://designobvio.us/portfolio/img/sliderBG.png') repeat; 
z-index: 2;
}

I would also like to see an ease of the shrinkage or growth; pretty sure this can be done with the transitions web kit stuff but it’s just finding and putting it in the correct spot. I’ve tried various methods to get this to resize. I’m honestly just guessing and checking now.

Thanks for you time! If you need anything most just ask

Answer 1

You are calling a min-width and a min-height on your body. Get rid of them and it works just fine.

EDIT: and you don’t need the transition property, the resizing goes fluently by itself. And be consistent! Or you make the background image for all browsers 100% or for all 99%. This will save you a lot of time in the future when there’s a small difference and you can’t find where it is.