Измените background-image, чтобы заполнить страницу по высоте, но разрешите элементы с обеих сторон - PullRequest
Новая
       9

Измените background-image, чтобы заполнить страницу по высоте, но разрешите элементы с обеих сторон

0 голосов
/ 12 октября 2009

У меня много проблем, пытающихся это сделать, и теперь мне интересно, возможно ли это даже в css. (Может быть, мне нужно будет найти какой-то другой способ, используя PHP, Flash или Javascript!)

В основном у меня есть 3 изображения. Каждый размером 1920x1200 (x * y). При размещении слева направо они образуют изображение ландшафта. Я хочу создать веб-страницу, на которой вы прокручиваете по горизонтали, чтобы видеть каждую часть сайта, где 3 изображения являются фоновыми изображениями элементов div и касаются друг друга с обеих сторон. Прокрутка должна была обрабатываться с помощью this (что также является причиной того, что .items должен был быть позицией: абсолютный.) По большей части я смог создать это:

HTML: 

<div class="items">
    <div class="item" id="item1"><a name="item1"></a>
         text
    </div>

    <div class="item" id="item2"><a name="item2"></a>
         more text
    </div>

    <div class="item" id="item3"><a name="item3"></a>
         even more text
    </div>
</div>

CSS: 

#item1, #item2, #item3 { 
    float: left;
    width: 1920px;
    height: 1200px;
}
#item1 {
    background: #ffffff url(../../images/main/1.jpg);
}
#item2 {
    background: #ffffff url(../../images/main/2.jpg);
}
#item3 {
    background: #ffffff url(../../images/main/3.jpg);
}
/* our additional wrapper element for the items */ 
.items { 
    width: 5790px;
    position: absolute;
}

Однако проблема, с которой я столкнулся, заключается в том, что мне нужно, чтобы это работало для экранов разных размеров и разрешений. То, что я хотел бы сделать, это сделать высоту каждого элемента #itemn равной 100% видимой страницы, но я не могу сделать это, не мешая элементам div появляться слева направо. Часто это приводит к тому, что они появляются друг на друге.

Я попытался выполнить инструкции здесь и использовать img. Но, установив фиксированное или абсолютное положение, я заставил изображения внутри элементов div, которые я ранее плавал влево, отображаться поверх друг друга.

Просто чтобы прояснить, эффект, которого я добиваюсь, похож на этих сайтов, но мне нужно фоновое изображение, которое нужно изменить по высоте, чтобы соответствовать странице иначе это будет плохо смотреться на разных разрешениях с моей машины. Я могу дать больше объяснений, если это будет необходимо, но я думаю, что подвел итог проблемы довольно хорошо. Можно ли это как-нибудь исправить - возможно, с использованием Javascript, PHP или Flash?

EDIT

Я только что обнаружил, что есть свойство CSS3, которое делает именно то, что мне нужно (background-size), но оно не реализовано в большинстве браузеров ... Хаком было бы использовать -moz-border-image, а затем использовать php для размещения правильной высоты и ширины px в css. Я не хочу этого делать!

1 Ответ

0 голосов
/ 12 октября 2009

Можете ли вы использовать Photoshop, чтобы объединить три изображения в одно большое изображение? Если вы выполняете технику, показанную на уловках CSS, она должна работать.

...