X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость ( Вход | Регистрация )

Открыть тему
Тема закрыта
> Как сделать два фона, В моем случае..
BukawINC
BukawINC
Topic Starter сообщение 6.7.2011, 21:31; Ответить: BukawINC
Сообщение #1


Участник
***

Группа: User
Сообщений: 117
Регистрация: 28.2.2011
Поблагодарили: 4 раза
Репутация:   0  


Всем привет, в css дуб дубом. Помогите реализовать два фона, в общем 1ая картинка(fon.jpg) 1920х1220 находиться в верхней части. Остальное, что внизу пусто, это пустое место нужно закрыть другой картинкой. Как это реализовать в моем случае?
CSS:


Развернуть/Свернуть




html, body, div, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
:focus {
    outline: 0;
}
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
code {
    font: 12px 'Courier New', Courier, Fixed;
    background: #FFFFFF;
}
blockquote {
    padding: 0 0 0 10px;
    font-style: italic;
    border-left: 10px solid #f2f2f2;
    display: block;
}
.clear {
    clear: both;
}
a img {
    border: none;
}
p {
    padding: 0 0 15px 0;
    margin: 0;
}
ol {
    margin: 10px 0px 5px 0px;
}
ol li {
    margin: 10px 0px 5px 5px;
    list-style: decimal inside;
}
a {
    text-decoration: underline;
    color: #222222;
}
a:hover {
    color: #37b33d;
    text-decoration: underline;
}
body {
    background: #f4f4f4 url(images/fon.jpg) no-repeat;
    font: 12px Tahoma, Arial, Verdana;
    line-height: 24px;
    color: #000000;
    text-shadow: 1px 1px #FFFFFF;
}
#container {
    width: 980px;
    margin: 0;
    padding: 0;
}
.logo {
    width: 293px;
    height: 200px;
    float: left;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
#left .logo h1, #left .logo h1 a, #left .logo h1 a:hover {
    color: #172937;
    font-family: 'PT Sans Narrow', Tahoma;
    font-size: 46px;
    font-weight: normal;
    margin: 20px 0px 0px 10px;
    padding: 0px 0px 0px 0px;
    word-spacing: 0em;
    line-height: 46px;
    text-shadow: 4px 4px 4px #45576f; /**/
    display: block;
    text-decoration: none;
}
span.desc {
    float: left;
    margin: 0;
    padding: 0;
    color: #cccccc;
    font-family: Tahoma, Arial;
    font-size: 12px;
    font-weight: normal;
    margin: 10px 0px 0px 20px;
    padding: 0px 0px 0px 0px;
    line-height: 18px;
    text-shadow: 2px 2px 2px #222222;
    display: block;
}
#left {
    float: left;
    width: 380px;
    margin: 0;
    padding: 0;
}
#right {
    float: right;
    width: 600px;
    margin: 10px 0 0 0;
    padding: 20px 0 0 0;
    background: url(images/line2.gif) top left no-repeat;
    text-align: justify;
}
.showcase-blok {
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
    text-align: left;
}
.side-blok {
    display: block;
    width: 250px;
    float: left;
    margin: 20px 20px 10px 25px;
    padding: 0;
    position: relative;
    color: #CCCCCC;
    text-shadow: 1px 1px 1px #333333;
}
.single-post-blok {
    margin: 0;
    padding: 0;
    float: left;
}
.classic-blok {
    display: block;
    margin: 10px 0px 0px 0px;
    padding: 0px 0px 10px 0px;
    float: left;
    background: url(images/line.gif) bottom left no-repeat;
}
.intro-blok {
    width: 600px;
    float: left;
    margin: 20px 0px 10px 0;
    padding: 0 0 20px 0;
    background: url(images/line2.gif) bottom left no-repeat;
    color: #3d3d3d;
    text-shadow: 1px 1px 1px #FFFFFF;
}
.outro-blok {
    width: 600px;
    float: left;
    margin: 10px 25px 0px 0;
    padding: 30px 0 0 0;
    background: url(images/line2.gif) top left no-repeat;
    color: #3d3d3d;
    text-shadow: 1px 1px 1px #FFFFFF;
}
.shadow-boxgrid {
    background: url(images/shadow2.png) bottom center no-repeat;
    position: absolute;
    z-index: 1;
    bottom: 22px;
    left: 2px;
    width: 268px;
    height: 18px;
}
.single-post-blok ul li {
    background: url(images/bullet.gif) no-repeat scroll 0 14px transparent;
    padding: 5px 0 5px 15px;
}
.side-blok a {
    text-decoration: underline;
    color: #42cc48;
}
.side-blok a:hover {
    color: #FFFFFF;
    text-decoration: underline;
}
.side-blok ul li {
    padding: 5px 0 5px 0px;
}
#footer {
    width: 600px;
    display: block;
    float: left;
    margin: 0px;
    padding: 15px 0 5px 0;
    font-family: 'PT Sans Narrow', Tahoma;
    font-weight: normal;
    background: url(images/line.gif) top left no-repeat;
    font-size: 14px;
}
#right h1 {
    color: #000000;
    font-family: 'PT Sans Narrow', Tahoma;
    font-size: 32px;
    font-weight: normal;
    margin: 6px 0px 10px 0px;
    padding: 0px 0px 20px 0px;
    word-spacing: 0em;
    line-height: 34px;
    text-shadow: 2px 2px 2px #bbbbbb;
    background: url(images/line2.gif) bottom left no-repeat;
    display: block;
}
h2 {
    color: #000000;
    font-family: 'PT Sans Narrow', Tahoma;
    font-size: 24px;
    font-weight: normal;
    margin: 6px 10px 18px 0px;
    padding: 0px 0px 0px 0px;
    word-spacing: 0em;
    line-height: 28px;
    text-shadow: 2px 2px 2px #bbbbbb;
}
h2 a, h2 a:visited {
    color: #000000;
    text-decoration: none;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}
h2 a:hover {
    color: #37b33d;
    text-decoration: none;
}
h3 {
    color: #000000;
    font-family: 'PT Sans Narrow', Tahoma;
    font-size: 18px;
    font-weight: normal;
    margin: 6px 10px 10px 0px;
    padding: 0px 0px 0px 0px;
    word-spacing: 0em;
    line-height: 28px;
    text-shadow: 2px 2px 2px #bbbbbb;
}
h3 a, h3 a:visited {
    color: #000000;
    text-decoration: none;
}
h3 a:hover {
    color: #4e76c6;
    text-decoration: none;
}
.side-blok h3 {
    color: #CCCCCC;
    font-family: 'PT Sans Narrow', Tahoma;
    font-size: 18px;
    font-weight: normal;
    margin: 6px 10px 10px 0px;
    padding: 0px 0px 0px 0px;
    word-spacing: 0em;
    line-height: 28px;
    text-shadow: 1px 1px 1px #333333;
}
ul.navigate {
    width: 240px;
    margin: 0 auto;
    padding: 20px;
    color: #cccccc;
    font-size: 13px;
    float: left;
    font-family: Arial, Helvetica, sans-serif;
    position: relative;
}
li {
    list-style: none;
    text-align: left;
}
li.menu {
    padding: 5px 0;
    width: 100%;
}
li.button a {
    display: block;
    font-family: 'PT Sans Narrow', Tahoma;
    font-size: 21px;
    height: 34px;
    overflow: hidden;
    padding: 10px 20px 0;
    position: relative;
    width: 200px;
}
li.button a:hover {
    text-decoration: none;
}
li.button a span {
    height: 44px;
    position: absolute;
    right: 0;
    top: 0;
    width: 4px;
    display: block;
}
li.button a.dark1 {
    background: url(images/dark1.gif) repeat-x top left;
    color: #FFFFFF;
    text-shadow: 1px 1px 1px #333333;
}
li.button a.dark1 span {
    background: url(images/dark1.gif) repeat-x top right;
    color: #FFFFFF;
}
li.button a.dark2 {
    background: url(images/dark2.gif) repeat-x top left;
    color: #FFFFFF;
    text-shadow: 1px 1px 1px #333333;
}
li.button a.dark2 span {
    background: url(images/dark2.gif) repeat-x top right;
    color: #FFFFFF;
}
li.button a:hover {
    background-position: bottom left;
}
li.button a:hover span {
    background-position: bottom right;
}
.dropdown {
    display: none;
    padding-top: 5px;
    width: 100%;
}
.dropdown li {
    background: #4a5a66;
    border: 1px solid #42515c;/**/
    color: #CCCCCC;
    text-shadow: 1px 1px 1px #333333;
    margin: 5px 0;
    padding: 4px 18px;
    font-family: Tahoma;
}
.menu a, .dropdown a, .menu a:visited, .dropdown a:visited {
    color: #42cc48;
    text-decoration: none;
    outline: none;
}
.menu a:hover, .dropdown a:hover {
    text-decoration: underline;
    color: #FFFFFF;
}
.qitem {
    padding: 0;
    margin: 10px 27px 40px 0px;
    width: 272px;
    height: 220px;
    background: #f8f6f6;
    overflow: hidden;
    position: relative;
    float: left;
    cursor: pointer;
}
.qitem img {
    border: 0;
    top: 0;
    left: 0;
    border: 0;
    position: absolute;
    z-index: 200;
}
.qitem .caption {
    position: absolute;
    z-index: 0;
    display: block;
    padding: 0 10px 10px 10px;
}
.qitem p {
    padding: 0;
    margin: 0;
}
/* Setting for bars */.bar1, .bar2, .bar3, .bar4 {
    position: absolute;
    background-repeat: no-repeat;
    z-index: 200;
}
#comments {
    width: 600px;
    margin: 0;
    padding: 20px 0 0 0;
    background: url(images/line.gif) top left no-repeat;
}
#commentform {
    width: 550px;
}
#commentform input {
    width: 190px;
    padding: 4px;
    margin: 5px 5px 1px 0;
}
#commentform textarea {
    width: 500px;
    padding: 2px;
}
#commentform #submit {
    margin: 5px 0 0 0;
    padding: 0;
    width: 156px;
    height: 27px;
}
.alt {
    margin: 0;
    padding: 10px;
}
.commentlist {
    padding: 0;
    text-align: justify;
    margin: 0 20px 30px 0;
}
.commentlist .comment {
    margin: 20px 0 0 0;
    padding: 10px 10px 10px 10px;
    list-style: none;
    border: 1px solid #ffffff;
    background: #f9f9f9;
}
.commentlist .alt {
    background: #f8f6f6;
}
.commentlist .comment .comment {
    margin: 20px 5px 10px 5px;
    padding: 5px 10px 5px 10px;
    width: auto;
}
.commentlist p {
    margin: 10px 5px 10px 0;
}
.commentmet_data {
    width: 100%;
    overflow: hidden;
}
.commentmet_data td {
    vertical-align: top;
    text-align: left;
}
.commentmet_avatar {
    width: 82px;
    padding: 15px 0 0 0;
}
.commentmet_text {
;
}
.commentmet_avatar img {
    margin: 0px 10px 0 0;
    border: 1px solid #dedcdc;
    padding: 5px;
    background: #f2f2f2;
}
#commentform p {
    margin: 5px 0;
}
.commentmet_replay {
    width: 100%;
    overflow: hidden;
}
.commentmet_replay a {
    float: right;
    display: block;
    text-indent: -9999px;
    text-transform: capitalize;
    background: url(images/reply.png) no-repeat;
    width: 73px;
    height: 19px;
    text-decoration: none;
}
.nocomments {
    text-align: center;
    margin: 0;
    padding: 0;
}
.commentmetadata {
    margin: 0;
    display: block;
    padding: 0 0 5px 0;
    font-size: 18px;
    font-family: 'PT Sans Narrow', Tahoma;
    font-weight: normal;
}
.commentmetadata span {
    font-size: 14px;
}
.commentmet_text {
    font-size: 12px;
}
#respond {
    margin: 10px 10px 50px 0px;
    padding: 20px 0 0 0;
    background: url(images/line.gif) top left no-repeat;
}
#commentform {
    color: #000;
    font-size: 12px;
    width: 90%;
}
#commentform small {
    position: relative;
    top: -1px;
    font-size: 12px;
}
#cancel-comment-reply-link {
    font-size: 11px;
    color: #000;
    margin: 0 0 0 25px;
}
#commentform a, #commentform small {
    color: #000;
}
#commentform input {
    background: #e4e4e4;
    border: 1px solid #dcdbd2;
    border-right: 1px solid #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
    font-size: 12px;
    padding: 4px;
    color: #000000;
}
#commentform textarea {
    background: #e4e4e4;
    border: 1px solid #dcdbd2;
    border-right: 1px solid #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
    font-size: 12px;
    padding: 4px;
    margin: 5px 0 0 0;
    color: #000000;
    overflow: auto;
}
#commentform input#submit {
    background: none;
    border: 0px;
}
#nav {
    width: 600px;
    margin: 0px;
    padding: 0;
    font-weight: normal;
    float: left;
    font-family: 'PT Sans Narrow', Tahoma;
    height: 51px;
    text-shadow: 1px 1px #ffffff;
    font-size: 14px;
    text-transform: uppercase;
    background: url(images/line2.gif) bottom left no-repeat;
    overflow: hidden;
}
#nav ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
}
#nav li {
    list-style: none;
    display: block;
    margin: 0px;
    text-decoration: none;
}
#nav li:hover, #nav li.sfHover, #nav li:hover a, #nav a:focus, #nav a:hover, #nav a:active {
    background: #f7f7f7;
    outline: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
    color: #666666;
    display: block;
    margin: 0;
    padding: 7px 12px 7px 12px;
    text-decoration: none;
}
#nav li a:hover, #nav li a:active {
    color: #000000;
    margin: 0;
    padding: 7px 12px 7px 12px;
    text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
    width: 180px;
    color: #999999;
    float: none;
    margin: 0px;
    padding: 7px 12px 7px 12px;
    text-decoration: none;
    border-top: 1px solid #ffffff;
}
#nav li li a:hover, #nav li li a:active {
    color: #000000;
    padding: 7px 12px 7px 12px;
    text-decoration: none;
    background: #f2f2f2;
}
#nav li {
    float: left;
    padding: 0px;
}
#nav li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 200px;
    margin: 0px;
    padding: 0px;
}
#nav li ul a {
    width: 200px;
    text-decoration: none;
}
#nav li ul a:hover, #nav li ul a:active {
    text-decoration: none;
}
#nav li ul ul {
    margin: -39px 0 0 200px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
    left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
    left: auto;
}
#nav li:hover, #nav li.sfhover {
    position: static;
}
#searchform {
    display: block;
    width: 240px;
    float: left;
    margin: 20px 20px 10px 0px;
    padding: 0 0 0 20px;
    overflow: hidden;
}
#s {
    background: #99acbd;
    width: 220px;
    font-size: 14px;
    font-weight: normal;
    padding: 10px;
    margin: 0;
    float: left;
    color: #FFFFFF;
    text-shadow: 1px 1px 1px #333333;
    border: 1px solid #566977;
}
.data {
    margin: 20px 0px 10px 0px;
    padding: 0;
    background: url(images/data.gif) 0 0 no-repeat;
}
.data p {
    padding: 0px 0px 0px 60px;
    display: block;
     font-style: italic;
    font-family: Georgia;
}
.index-data {
    width: 600px;
    margin: 5px 0px 30px 0px;
    padding: 0px 0px 10px 0px;
    float: left;
    background: url(images/line.gif) bottom left no-repeat;
    font-style: italic;
    font-size: 12px;
    font-family: Georgia, 'Times New Roman';
}
/*форматирование элементов и картинок*/.img-left {
    margin: 5px 25px 0 0;
    border: 1px solid #dedcdc;
    padding: 12px;
    float: left;
    background: #f8f6f6;
    position: relative;
}
.img-left:hover {
    opacity: 0.7;
}

/*форматирование элементов и картинок*/.img-new {
    /*margin: 5px 15px 0 0;*/
    border: 1px solid #dedcdc;
    padding: 4px;
    float: left;
    background: #f8f6f6;
    position: relative;
    margin-left: 15px
}
.img-new:hover {
    opacity: 0.7;
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 15px;
}
img.aligncenter {
    border: 1px solid #dedcdc;
    padding: 10px;
    background: #f8f6f6;
}
.alignleft {
    float: left;
}
img.alignleft {
    margin: 5px 15px 7px 0;
    border: 1px solid #dedcdc;
    padding: 10px;
    background: #f8f6f6;
}
.alignright {
    float: right;
}
img.alignright {
    margin: 5px 0 7px 15px;
    border: 1px solid #dedcdc;
    padding: 10px;
    background: #f8f6f6;
}
.wp-caption {
    border: 1px solid #ddd;
    text-align: center;
    padding: 10px 4px 0px 4px;
    background: #f7f7f7 none;
    margin: 10px;
}
.wp-caption img {
    margin: 0;
    padding: 0;
    border: 0 none;
}
.wp-caption-text {
    font-size: 10px;
    line-height: 17px;
    padding: 7px 5px;
    margin: 0;
}
.pagenavi {
    width: 600px;
    margin: 0px 0 20px 0;
    padding: 0px 0 0 0;
    float: left;
    font-size: 18px;
    font-family: 'PT Sans Narrow', Tahoma;
}





0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
tema_fa
tema_fa
сообщение 6.7.2011, 22:18; Ответить: tema_fa
Сообщение #2


Частый гость
**

Группа: User
Сообщений: 78
Регистрация: 16.4.2011
Поблагодарили: 11 раз
Репутация:   2  


Для тега body: ставлю фоном градиентное изображение, которое повторяется, фиксированный.
Ставлю класс "bg": картинка, которая будет фоном справа, не повторяется, фиксированный.
Потом просто применяю класс "bg" к таблицы, созданной с атрибутами ширина - 100%, высота - 100%.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
sinneren
sinneren
сообщение 9.7.2011, 21:12; Ответить: sinneren
Сообщение #3


Новичок
*

Группа: User
Сообщений: 20
Регистрация: 10.12.2010
Из: Октябрьский
Поблагодарили: 1 раз
Репутация:   0  


1.для body ставится background:url(fon1) top;
2.для html ставится background:url(fon1) bottom;
либо
2.для div который является большой обёрткой для всех с шириной и высотой 100% ставится background:url(fon2) bottom;
Если правильно понял, то так.
В зависимости от того как именно тебе нужно поставить фон расставляешь уже позиции после ссылки "0 top" или "top 0" ну и естественно направление повторения картинки repeat-x или y или отсутствия no-repeat.


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Большой_Кактус
Большой_Кактус
сообщение 15.7.2011, 12:54; Ответить: Большой_Кактус
Сообщение #4


Новичок
*


Группа: User
Сообщений: 31
Регистрация: 26.3.2011
Поблагодарили: 2 раза
Репутация:   1  


На мой взгляд, целесообразнее было бы сделать, как описал sinneren. Первый способ.


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Как сейчас зарегистрировать Яндекс кошелек за пределами России?
4 metvekot 274 Сегодня, 19:04
автор: metvekot
Открытая тема (нет новых ответов) Как поднять доверие к сайту?
5 fair_exchange 359 Сегодня, 18:33
автор: genjnat
Открытая тема (нет новых ответов) Как мошенники зарабатывают на прямых трансляциях в Instagram
Не ждите порно в инстаграм, его нет
10 PostBrigada 1141 Вчера, 22:40
автор: JOHNY
Открытая тема (нет новых ответов) Маленький кейс как сделать много почтовых ящиков в Gmail
Один аккаунт = много ящиков
1 PostBrigada 523 Вчера, 21:34
автор: Pingunio
Горячая тема (нет новых ответов) Черный список обменников и как безопасно обменять валюту
141 Kurses 29932 Вчера, 13:04
автор: BestExchangers


 



RSS Текстовая версия Сейчас: 16.12.2017, 21:10
Дизайн