Как залить фон градиентом?

[Lucky_Malina]

Здравствуйте! Я начинающий верстальщик. Столкнулась с такой проблемкой. Есть полосочка - градиент, для фона. Размер 1500Х1. Градиент заливается, но он не растягивается на всю высоту, то есть если не уменьшать масштаб, все отлично, а когда уменьшаешь, то градиент как обрывается. Repeat делать смысла нет, как я поняла... Помогите пожалуйста. Есть ли выход из этой ситуации??

[Searcher]

телепаты, ау...

нет таких?

может Малина нам покажет, что ей уже удалось сделать?

[psywalker]

  Searcher said:

телепаты, ау...

Яяя...тууут

html{height: 100%;}

body{ min-height: 100%; background: его цвет конечный внизу! нужный фон и по оси Х его. }

[Lucky_Malina]

Ох ребята, я бы и рада залить картинку на сайт, но как картинку залить.(( может подскажете...он требует http...

[Searcher]

для начала нам не картинка нужна, а ваш код

[Lucky_Malina]

ага...код..я так и подумала)) вот:

* {margin: 0;

padding: 0;}

html {height: 100%}

body {

font: 16px/18px Verdana, Arial, Helvetica, sans-serif;

width: 100%;

height: 100%;

background-image:url(image/bckgjpg.jpg);

background-repeat:repeat-x;

color:#FFFFFF;

border:none;}

это без предложенных walkerом поправок..

[:tyz]

  Lucky_Malina said:

Здравствуйте! Я начинающий верстальщик. Столкнулась с такой проблемкой. Есть полосочка - градиент, для фона. Размер 1500Х1. Градиент заливается, но он не растягивается на всю высоту, то есть если не уменьшать масштаб, все отлично, а когда уменьшаешь, то градиент как обрывается. Repeat делать смысла нет, как я поняла... Помогите пожалуйста. Есть ли выход из этой ситуации??

Читайте мой топ внимательно

[Searcher]

:tyz, исправьте вашу ссылку

Lucky_Malina, если, как вы написали, у вас картинка 1500х1 (первым числом принято указывать размер по оси Х), это означает, что градиент горизонтальный. Т.е. цвет меняется по оси Х. Тогда мне непонятно все остальное... Если же все-таки картинка 1х1500, тогда Волкер прекрасный телепат! Он все правильно сказал. Изучите внимательнее свойство background. Ваш код должен быть примерно таким:

body {
font: 16px/18px Verdana, Arial, Helvetica, sans-serif;
width: 100%;
min-height: 100%;
background:url(image/bckgjpg.jpg) repeat-x #f88;
color:#FFFFFF;
}

Вместо height лучше указать min-height, border отменять у body зачем? Его и так там нет. Ну а вместо #f88 подставляем цвет нижней границы вашего градиента.

[hf3]

А ещё можно сделать финт ушами -

 background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #444444),color-stop(1, #999999)); /* Saf4+, Chrome */
			filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); /* IE6,IE7 */
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999')"; /* IE8 */

Только пользователи Оперы в таком случае идут лесом…

[s0rr0w]

  hf3 said:

Только пользователи Оперы в таком случае идут лесом…

Зато удобный и быстрый браузер

[hf3]

Во во. Для не СНГ - самое оно. Оперы там мало…

[Lucky_Malina]

ух ты..

hf3 спасибо... теперь будет что разобрать))

Walker, спасибочки!!

Searcher, Вам также огромное спасибо)) теперь все поняла..)) размер у градиента 1Х1500...

[WebAndorix]

Подскажите, пожалуйста, как растянуть фон-градиент на всю страницу?

body {
background: #f5f5f5; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #f5f5f5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f5f5f5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#f5f5f5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#f5f5f5 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#f5f5f5 100%); /* IE10+ */
background: linear-gradient(to bottom, # 0%,#f5f5f5 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f5f5f5',GradientType=0 ); /* IE6-9 */
}

Edited February 25, 2013 by WebAndorix