Различный цвет фона по обе стороны страницы - PullRequest
Новая
       22

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

7 голосов
/ 18 января 2011

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

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

Возможно ли это?

Спасибо!

Edit:

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

Ответы [ 5 ]

6 голосов
/ 18 января 2011

Это , кажется, работает: 

<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;
}
3 голосов
/ 18 января 2011

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

Live Demo (много контента)
Демонстрация в реальном времени (мало контента)

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
}
1 голос
/ 20 января 2011

Мне не понравилось решение 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:1006 *http://jsfiddle.net/HktPN/ Но это происходит в моем браузере.

1 голос
/ 18 января 2011

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

0 голосов
/ 18 января 2011

на примере Matt, просто добавление контейнера решает его: http://jsfiddle.net/PNYVe/3/

...