Помогите с background!

[grabla]

Помогите изменить серый фон на сайте http://satsputnik.500mb.net/ на фон с градиентом. Как я только не пробовал изменить его получается одно и тоже (фон получается с градиентом но шапка сайта исчезает за шапку отвечает файл bg_top.jpg саму строку с параметрами для градиента я водил вместо background:#afafaf (отвечает за фон который сейчас на сайте)

вот так получилось

html, body { margin:0; height:100%; font:12px/11px Calibri, Arial, Helvetica, sans-serif; font-style:italic; color:#515151; line-height:14px; background:-webkit-linear-gradient(left, #f9f9f9, #000000); url(../images/style/bg_top.jpg) no-repeat center top; }

также пробовал параметры градиента такие background: url(../images/style/bg_fon.jpg) repeat-y 100% 0; margin: 0; height: 100%;

в заранее сделав изображение с градиентов в фотошопе но и также изменить фон не получилось.

все время шапка исчезает а градиент виден.

Хочу сделать фон градиентом так как у меня шапка сайта в градиенте и что бы фон тоже соответствовал ей

также кто возьмется помочь можете открыть мой сайт через google chrome и с помощью Инструментов разработчика во вкладке Sources выбрать файл http://satsputnik.500mb.net/templates/black/css/styles.css и наглядно изменять его что бы увидеть результат. также прошу Вас писать более подробно так как новичок в этом.

Оригинал styles.css

html, body { margin:0; height:100%; font:12px/11px Calibri, Arial, Helvetica, sans-serif; font-style:italic; color:#515151; line-height:14px; background:#afafaf url(../images/style/bg_top.jpg) no-repeat center top; }

(Еще описании проблемы для полного ознакомления)

Вот сейчас у меня на сайте стоит и шапка и серый фон за серый фон отвечает параметр background:#afafaf вот я этот параметр изменил на параметр

background:-webkit-linear-gradient(left, #f9f9f9, #000000) при этом ни чего не меняется то-есть фон а если в конце этого параметра прописать ; то фон меняется на градиент и шапка исчезает я пришел к выводу что параметр background:#afafaf работает без точки запятой что хорошо а параметр background:-webkit-linear-gradient(left, #f9f9f9, #000000) не работает без точки запятой

получается что если мне сделать вот так html, body { margin:0; height:100%; font:12px/11px Calibri, Arial, Helvetica, sans-serif; font-style:italic; color:#515151; line-height:14px; background:-webkit-linear-gradient(left, #f9f9f9, #000000) url(../images/style/bg_top.jpg) no-repeatcentertop; } то отображаться градиент не будет а если поставить точку запятую ту будет отображаться градиент но шапка исчезнет так вот все упирается в точку запятую как мне избавится от этой головоломки

[Vadimka]

где то ты css косячишь жестко походу, а background:-webkit-linear-gradient(left, #f9f9f9, #000000) отвечает за градиентный фон в браузерах -webkik то бишь в хроме и сафари а тебе надо кросбраузерный

background: #f9f9f9; /* Old browsers */
background: -moz-linear-gradient(top, #f9f9f9 0%, #000000 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9f9), color-stop(100%,#000000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f9f9f9 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f9f9f9 0%,#000000 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f9f9f9 0%,#000000 100%); /* IE10+ */
background: linear-gradient(to bottom, #f9f9f9 0%,#000000 100%); /* W3C */

вот тебе в помощь http://www.colorzilla.com/gradient-editor/

[Николя223]

после градиента для хрома стоит точка с запятой... зачем? точка с запятой означает что background закрывается. а следом идёт url...

задайте фон шапки другому элементу

или ... попробуйте так

Edited November 25, 2012 by Николя223

[grabla]

после градиента для хрома стоит точка с запятой... зачем? точка с запятой означает что background закрывается. а следом идёт url...

задайте фон шапки другому элементу

или ... попробуйте так

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

[Николя223]

вот.

Вы даже пример, ссылку на который я дал не читали =)

[grabla]

а вот спасибо вам помогла ссылка выше вы такой умный))

Edited November 25, 2012 by grabla

[grabla]

а вот спасибо вам помогла ссылка выше вы такой умный))

+

[SelenIT]

-ms-linear-gradient(top, #f9f9f9 0%,#000000 100%); /* IE10+ */

не нужен. IE10 понимает стандартный вариант.

[grabla]

-ms-linear-gradient(top, #f9f9f9 0%,#000000 100%); /* IE10+ */

не нужен. IE10 понимает стандартный вариант.

спасибо за внимание но градиент буду использовать в виде фото 1280х2 px

описания выше были примером.

[Николя223]

-ms-linear-gradient(top, #f9f9f9 0%,#000000 100%); /* IE10+ */

не нужен. IE10 понимает стандартный вариант.

спасибо за внимание но градиент буду использовать в виде фото 1280х2 px

описания выше были примером.

а если разрешение у монитора больше, что тогда? background-size - ом тянуть будите?

а вцелом... прикольно смотриться =)

Edited November 26, 2012 by Николя223

[grabla]

-ms-linear-gradient(top, #f9f9f9 0%,#000000 100%); /* IE10+ */

не нужен. IE10 понимает стандартный вариант.

спасибо за внимание но градиент буду использовать в виде фото 1280х2 px

описания выше были примером.

а если разрешение у монитора больше, что тогда? background-size - ом тянуть будите?

а вцелом... прикольно смотриться =)

А вот насчет монитора то об этом даже не подумал, поэкспериментировать тоже не могу так как монитор у меня 1280х1024

если есть предложения как это реализовать то прислушаюсь, сам я тоже ничего практически не понимаю в css и html

Edited November 27, 2012 by grabla