Как я могу предотвратить наложение div-ов в определенных разрешениях? (Google Zeitgeist)

Question

Вот мой сайт: http://designobvio.us/portfolio/body.html

Вот мой начинающий сайт: http://www.googlezeitgeist.com/en/top-searches/battlefield_three

Я довольно близко подхожу к макету;однако, когда вы слишком сильно сжимаете браузер, это создает разрыв.

Также я не могу даже отладить разрешения, отличные от моих (1280x800), которые, я уверен, что-то еще ломается в другом направлении.

Обновление: это может быть общий размерФото?Zeitgeist использует изображение 800x800 (кв);в то время как я использую прямоугольник?

Проблема также может быть ошибка в структуре моего HTML?(это действительно сложный макет для меня)

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

или мой CSS:

html, body, #body-wrapper, .bodySection {
    height: 100%;
}
#body-wrapper-left {
    position: relative;
    width:35%;
    height: 100%;
}
#body-wrapper-left #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:auto 100%;
    -webkit-background-size:auto 100%;
    -moz-background-size:auto 100%;
    background-size:auto 100%;
    -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-left #pattern {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: url('http://designobvio.us/portfolio/img/sliderBG.png') repeat;
    z-index: 2;
}
#body-wrapper-right {
    position: absolute;
    height: 100%;
    right:0;
    top:0;
    min-width:65%;
    width:65%;
    background:#fff;
    z-index:9;
}

Насколько мне известно, это выглядит как установленная min-height // min-width (возможно макс в другом направлении) значение где-то.Кто-нибудь знает, где и что выбрать, чтобы я мог унифицировать ширину и высоту, чтобы эффект больше походил на Google Zeitgeist?

Answer 1

Вы можете использовать опцию фоновой обложки CSS3.

#element {
background: url(http://designobvio.us/portfolio/img/Me.jpg) center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 50%;
height: 100%;
position: absolute;
}

Пример: http://jsfiddle.net/B7W2K/20/

Хотя, очевидно, это не будет работать в старых браузерах.

Answer 2

Разрыв, который вы видите, связан с тем, что ваше изображение пытается масштабироваться вертикально, а не горизонтально. Вы можете исправить этот пробел, переключив это поведение так:

#body-wrapper-left #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:100% auto; /* notice the flip in the statement */
    -webkit-background-size:100% auto;
    -moz-background-size:100% 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;
}