2 background на одной странице

artefakt777

artefakt777

Постоялец
Регистрация
15 Июл 2012
Сообщения
537
Реакции
141
Как такое в css прописать? Нужно чтобы получился первый background постоянно на верху и на всю ширину экрана.
А второй background был под ним и состоял из кусков на всю ширину и высоту экрана.

bg.jpg bg2.jpg
 
Можно например так:
Для просмотра ссылки Войди или Зарегистрируйся
HTML: 
<html>
    <body>
    <style>
       
        body {
            margin:0;
            padding: 0;}
        div#head {
            background: linear-gradient(to right, #ff7400 0%, #fff600 100%);
            height: 100px;
            width: 100%;
            position: fixed;}
        div#body {
            height: 2000px;
            background: linear-gradient(to bottom, #5e3a11 0%, #494f2f 100%);}
    </style>
    <div id="head"></div>
    <div id="body"></div>
    </body>
</html>
 
Тогда как можно закрепить позицию (для модулей), чтобы она не съезжала при изменениях экрана?
Получается, что background подстраивается под размеры экрана, а вот информация съезжает с места.
 
errogaht написал(а):
Можно например так:
Для просмотра ссылки Войди или Зарегистрируйся
HTML: 
<html>
    <body>
    <style>
      
        body {
            margin:0;
            padding: 0;}
        div#head {
            background: linear-gradient(to right, #ff7400 0%, #fff600 100%);
            height: 100px;
            width: 100%;
            position: fixed;}
        div#body {
            height: 2000px;
            background: linear-gradient(to bottom, #5e3a11 0%, #494f2f 100%);}
    </style>
    <div id="head"></div>
    <div id="body"></div>
    </body>
</html>
Нажмите для раскрытия...
а зачем сразу fixed?
 
1. фон - position:fixed; height:200px(к примеру);
2. фон - height:100%; padding-top:200px; box-sizing:border-box;
Если не сработает, пропиши html, body{height:100%;}
 
Ну и собственно не забываем про старичков:
HTML: 
background: -moz-linear-gradient(...); /* FF3.6+ */
background: -webkit-gradient(linear,...); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(); /* Opera 11.10+ */
background: -ms-linear-gradient(); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient(); /* IE6-9 */
 
Тогда уж так, и блоки получатся резиновые по высоте. Пихайте модули, какие хотите.
HTML: 
<html>
    <body>
    <style>      
        body {
            margin:0;
            padding: 0;}
        div#head {
            position: relative;
            background: linear-gradient(to right, #ff7400 0%, #fff600 100%);
            width: 100%;}
        div#body {
            position: fixed;
            width: 100%;
            background: linear-gradient(to bottom, #5e3a11 0%, #494f2f 100%);}
    </style>
    <div id="head"></div>
    <div id="body"></div>
    </body>
</html>
 
попробуйте указать свойства background через запятую
body {
background:
url( images/aztec_block.png) 0 0 no-repeat,
url(images/aztec_block.png) -576px 100% no-repeat;
}
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху