HTML/CSS Дизайн для фона

Question

мне нужна помощь относительно фона сайта, ниже детали я хочу знать:

• Different градиент фона на левой и правой части сайта (он должен работать также во всех браузерах IE).
• Как это сделать с помощью HTML/CSS?

Просьба помочь. Благодаря!

Answer 1

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

Это будет работать во всех браузерах.

body {background: url("huge-image.png") center top no-repeat;} 

Всем, кто говорит, Б.Г. будет большим.

Изображение разрешения: 19488 x 3552 и размер просто 51 KB. Проверьте это:

http://lib.znate.ru/pars_docs/refs/35/34496/34496_html_m46d9bb81.gif

Answer 2

1. Сформировать свое тело фон here
2. Создание центрированный контейнера DIV с и прозрачный фон занавес изображения
3. Создать центрированный сайт-контейнер DIV в контейнере DIV 100% высоты и набора фон до серого цвета

Удачи.

Разъяснения для комментариев Квентина: использовать диагональный градиент:

background: #b5bdc8; /* Old browsers */ 
background: -moz-linear-gradient(-45deg, #b5bdc8 0%, #828c95 36%, #28343b 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#b5bdc8), color-stop(36%,#828c95), color-stop(100%,#28343b)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(-45deg, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(-45deg, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(-45deg, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* IE10+ */ 
background: linear-gradient(135deg, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=1); /* IE6-9 fallback on horizontal gradient */ 

Answer 3

это метод, с помощью которого вы можете сделать текстуру фона с помощью CSS

background: linear-gradient(left, white 50%, #8b0 50%); 
background-size: 100px 100px; 

Примечание: Вы можете изменить значение полярности и линейность, а затем определить другой фон на всей странице через фоновое положение

Также проверьте это .-->http://lea.verou.me/css3patterns/

Его также можно использовать как основание градиента. Открыть noisetexturegenerator.com и попробуйте ниже вещь

body { background-image:url('gradient image'); background-repeat:repeat-x; } 

Answer 4

Вы можете использовать CSS-градиент. Это должно работать со всеми браузерами.

background-image: linear-gradient(left top, rgb(232,232,232) 16%, rgb(122,122,122) 58%, rgb(115,115,115) 79%); 
background-image: -o-linear-gradient(left top, rgb(232,232,232) 16%, rgb(122,122,122) 58%, rgb(115,115,115) 79%); 
background-image: -moz-linear-gradient(left top, rgb(232,232,232) 16%, rgb(122,122,122) 58%, rgb(115,115,115) 79%); 
background-image: -webkit-linear-gradient(left top, rgb(232,232,232) 16%, rgb(122,122,122) 58%, rgb(115,115,115) 79%); 
background-image: -ms-linear-gradient(left top, rgb(232,232,232) 16%, rgb(122,122,122) 58%, rgb(115,115,115) 79%); 

background-image: -webkit-gradient(
    linear, 
    left top, 
    right bottom, 
    color-stop(0.16, rgb(232,232,232)), 
    color-stop(0.58, rgb(122,122,122)), 
    color-stop(0.79, rgb(115,115,115)) 
); 

Более старые версии IE не поддерживают градиент, так что вы должны сделать второй Div контейнер, который будет прозрачным в других браузерах.

и определить новые CSS для более старых версий IE, например:

<!--[if lte IE 8]> 
<style> 

    .diaggradientback 
    { 
     position:absolute; 
     left:0; 
     top:0; 
     width:100%; 
     height:100%; 
     overflow:hidden; 
     filter: progid:DXImageTransform.Microsoft.gradient(GradientType='1', startColorstr='#ffa885', endColorstr='#330000'); 
    } 

    .diaggradientfront 
    { 
     position:absolute; 
     left:0; 
     top:0; 
     width:100%; 
     height:100%; 
     overflow:hidden; 
     filter: progid:DXImageTransform.Microsoft.gradient(GradientType='0', startColorstr='#bbffa885', endColorstr='#bb330000'); 
    } 
</style> 
<![endif]--> 

Answer 5

Если вы хотите работать на старых браузерах, вы могли бы написать что-то вроде этого:

http://jsfiddle.net/ftcjZ/2/

Этот более сложный html - все зависит от того, какой именно браузер вам нужен для запуска этого.

CSS:

.bg-left { background: url('http://cdn.imghack.se/images/3be5ae39376f069c0f49dd0cf09e74c7.png') top left no-repeat; } 
.bg-right { padding: 0 118px 0 125px; background: url('http://cdn.imghack.se/images/ae53c28777043687b9a110e867798cb5.png') top right no-repeat; } 
.main-content { height: 800px; background-color: white; } 

HTML:

<div class="bg-left"> 
    <div class="bg-right"> 
    <div class="main-content"> 

    </div> 
    </div> 
</div> 

EDIT: Я обновил код меняющийся запас для основного контейнера для заполнения в .bg-right как это более надежное решение.