Разный цвет фона с обеих сторон страницы

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

Например, я не собираюсь создавать изображение размером 9000x10 пикселей с правильными цветами по обеим сторонам и замостить его, так как это сработает, только если вы не уменьшите масштаб настолько, чтобы увидеть край фонового изображения.

Это возможно?

Спасибо!

Изменить:

Я должен был указать, что фон должен покрывать всю высоту страницы, а не только высоту окна/окна просмотра.


colors html css background tiling
person Jesse    schedule 18.01.2011    source источник

Ответы (5)


arrow_upward
7
arrow_downward

Это похоже работает:

<body>
<div id="bg-right"></div>
<!-- rest of page -->
</body>


body {
  background-color: purple;
}
#bg-right {
  background-color: yellow;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  right: 0;
  z-index: -1;
}
person Fred Nurk    schedule 18.01.2011
comment
Кажется, это работает, но вы должны заметить, что position:fixed не поддерживается в IE6. - person Dan; 18.01.2011
comment
Это проблема, из-за которой вы можете видеть 1px фиолетового фона там, где должен быть желтый. (зависит от того, является ли количество пикселей ширины области просмотра четным или нечетным) (тестирование в Chrome) - person thirtydot; 18.01.2011
comment
@thirtydot: Кажется, теперь это исправлено. - person Fred Nurk; 18.01.2011
comment
@Fred Nurk: Да, это исправлено. Я думаю, мне больше нравится ваше решение, потому что оно опирается только на один дополнительный элемент. - person thirtydot; 18.01.2011
comment
@Fred Nurk: Аккуратно, но, к сожалению, это не работает с нашим хорошим другом IE. - person thirtydot; 18.01.2011
comment
Я знаю, что текст — плохое средство для сарказма, но хороший друг чуть не заставил меня глотнуть кофе. - person Fred Nurk; 18.01.2011

arrow_upward
3
arrow_downward

Это работает в IE7+ как с небольшим, так и с большим количеством контента:

Живое демо (много контента)
Живое демо (мало контента)

HTML:

<div id="left"></div>
<div id="right"></div>
<div id="container"></div>

CSS:

html, body {
    margin: 0; padding: 0; border: 0; 
}
body {
    background: #ccc
}
#left, #right {
    position: fixed;
    width: 50%;
    height: 100%;
    top: 0
}
#left {
    background: #ccc;
    left: 0
}
#right {
    background: #999;
    right: 0
}
#container {
    background: #fff;
    width: 80%;
    margin: 0 auto;
    position: relative
}
person thirtydot    schedule 18.01.2011

arrow_upward
1
arrow_downward

Как тебе это? http://jsfiddle.net/PNYVe/

person Matt Asbury    schedule 18.01.2011
comment
если содержимое большое, а появляется вертикальная прокрутка, то фон не растянется до конца. пример: jsfiddle.net/dan86/PNYVe/2 - person Dan; 18.01.2011
comment
Ах, что сказал Дэн. Мне это тоже нужно. :/ - person Jesse; 18.01.2011
comment
Просто измените с absolute на fixed. Кажется, это так работает. jsfiddle.net/JzTdF - person Alin Purcaru; 18.01.2011

arrow_upward
1
arrow_downward

Мне не понравилось решение height: 100%; position: fixed;, потому что я хотел оставить открытой возможность иметь фоновое изображение, которое позже прокручивалось вместе со страницей. (Хотя я не думал об этом при написании вопроса.) Я поиграл и обнаружил, что min-height: 100%; работает.

<html>
    <head>
        <style type="text/css">

            body {
                padding: 0;
                margin: 0;
            }

            #container {
                width: 100%;
                min-height: 100%;
                position: relative;
            }

            #left, #right {
                width: 50%;
                height: 100%;
                position: absolute;
                z-index: -1;
            }

            #left {
                left: 0;
                background-color: navy;
            }

            #right {
                right: 0;
                background-color: maroon;
            }

            #content {
                width: 512px;
                height: 100%;
                margin: 0 auto;
                background-color: white;
            }

        </style>
    </head>
    <body>
        <div id="container">
            <div id="left"></div>
            <div id="right"></div>
            <div id="content">
                Hi<br />
                Hi<br />
                Hi<br />
                Hi<br />
                Hi<br />
                Hi<br />
                Hi<br />
                Hi<br />
                Hi<br />
                Hi<br />
                Hi<br />
                Hi<br />
                Hi<br />
                Hi<br />
                Hi<br />
                Hi<br />
                Hi<br />
                Hi<br />
                Hi<br />
                Hi<br />
            </div>
        </div>
    </body>
</html>

По какой-то причине это не работает в jsfiddle.net: http://jsfiddle.net/HktPN/ Но это происходит в моем браузере.

person Jesse    schedule 20.01.2011

arrow_upward
0
arrow_downward

используя пример Мэтта, простое добавление контейнера решает эту проблему: http://jsfiddle.net/PNYVe/3/

person NicolaPasqui    schedule 18.01.2011
comment
Это решает проблему наличия слишком большого количества контента. Но попробуйте удалить часть содержимого, фон уменьшится до размера содержимого и не заполнит всю страницу xD - person Dan; 18.01.2011