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



 

Здравствуйте, гость (

| Вход | Регистрация )

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


Всем привет, в 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


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


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


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

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.


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


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Арбитражники, как ведете учет расходов и доходов?
11 Boymaster 1744 Вчера, 23:35
автор: Boymaster
Горячая тема (нет новых ответов) Как вывести деньги в Украине с заблокированного Юмани ?
29 freeax 4773 Вчера, 1:19
автор: sergio11
Горячая тема (нет новых ответов) Как вы отдыхаете от работы за компом
148 adw-kupon.ru 19679 8.4.2024, 10:37
автор: Skyworker
Открытая тема (нет новых ответов) Как вы бросили работу и перешли на заработок с сайтов?
18 uahomka 3087 5.4.2024, 5:53
автор: Skyworker
Горячая тема (нет новых ответов) Как бездомные хранят деньги?
81 metvekot 13645 31.3.2024, 12:44
автор: Boymaster


 



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