Градиент не растягивается на 100% по высоте и ширине

@Cdelphi78 · Регистрация: 21.02.2014

Author24 — интернет-сервис помощи студентам

Значить, прописываю градиент тегу body а он не растягивается на всю ширину и высоту как если просто указать цвет.

Кликните здесь для просмотра всего текста

HTML5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
   <div class="bl-1">
        <h1>Bacground Fon</h1>
   </div>
   
    
</body>
</html>

Кликните здесь для просмотра всего текста

CSS

body {
        background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0, #3FFF05),
    color-stop(1, #000000)
);
background: -o-linear-gradient(bottom, #3FFF05 0%, #000000 100%);
background: -moz-linear-gradient(bottom, #3FFF05 0%, #000000 100%);
background: -webkit-linear-gradient(bottom, #3FFF05 0%, #000000 100%);
background: -ms-linear-gradient(bottom, #3FFF05 0%, #000000 100%);
background: linear-gradient(to bottom, #3FFF05 0%, #000000 100%);
    
}
    
    
 
 
 
 
 
h1 {
    
    font-size:15em;
    color:red;
    text-align: center;
    
}
.bl-1 {
    width: 500px;
    height: 500px;
    background:  red;
}

Кликните здесь для просмотра всего текста

Градиент не растягивается на 100% по высоте и ширине

@the_false · 13.11.2015, 14:52

По умолчанию, вроде, высота body равна его содержимому, вот он и заливается так.
Вот так должно помочь:

CSS

html, body {
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
      }

@Cdelphi78 · 13.11.2015, 15:38 **[ТС]**

Все заработало, пасиб, странно у меня даже reset.css был подключен.

Добавлено через 11 минут
теперь другая проблема при добавлении туда же фонового изображения, оно пропадает, остается градиент, как их использовать градиент и фоновое изображение вместе?

Добавлено через 1 минуту
Теперь другая проблема при добавлении туда же в body фонового изображения оно пропадает, как испjльзовать вместе градиент и картинку?

@Almag13 · 13.11.2015, 17:17

Когда вы используете градиент, то background занят... Ваш код:

CSS

background: -o-linear-gradient(bottom, #3FFF05 0%, #000000 100%);
background: -moz-linear-gradient(bottom, #3FFF05 0%, #000000 100%);
background: -webkit-linear-gradient(bottom, #3FFF05 0%, #000000 100%);
background: -ms-linear-gradient(bottom, #3FFF05 0%, #000000 100%);
background: linear-gradient(to bottom, #3FFF05 0%, #000000 100%);

То есть вам необходимо либо градиент повесить на отдельный блок, который так же растянут на всю высоту и ширину, либо картинку повесить на этот блок. В другом случае все зависит от расположения:

CSS

background: url('images.jpg'); // в данном случае градиент переопределит картинку
 
background: -o-linear-gradient(bottom, #3FFF05 0%, #000000 100%);
background: -moz-linear-gradient(bottom, #3FFF05 0%, #000000 100%);
background: -webkit-linear-gradient(bottom, #3FFF05 0%, #000000 100%);
background: -ms-linear-gradient(bottom, #3FFF05 0%, #000000 100%);
background: linear-gradient(to bottom, #3FFF05 0%, #000000 100%);
 
background: url('images.jpg'); // в данном случае картинка переопределит градиент

@the_false · 13.11.2015, 17:28

Теперь другая проблема при добавлении туда же в body фонового изображения оно пропадает, как испjльзовать вместе градиент и картинку?

Способов может быть несколько, смотря какой больше в кайф.

Можно, просто не заморачиваться, а покрыть все блоком с картинкой, как сказано выше. А точнее даже в body - картинку, а поверх блок градиента. Но может не подойти.

Или - записать вот так:

CSS

1
2

background: -webkit-gradient( linear, left top, left bottom, color-stop(0, rgba(63,255,5,0.5)), color-stop(1, rgba(0,0,0,0.5)) ), url([url]https://www.cyberforum.ru/customavatars/avatar457660_1.gif);[/url]
}

CSS позволяет через запятую назначить цвет и картинку одновременно, и даже несколько картинок в одном background, если надо.
Но в вашем случае фишка в том, что если не убавить opacity для цвета, то они перекрываются. В том куске, что указан мною выше у цвета 0.5 прозрачность и потому картинка видна)

@Almag13 · 13.11.2015, 17:42

multiple backgound, сейчас возможно и работает со многими браузерами, раньше это было не совсем кроссбраузерное решение...
Посмотреть тут

@Cdelphi78 · 13.11.2015, 20:37 **[ТС]**

Без определения прозрачности можно сделать, если нет то тогда придется дополнительный блок с z-indekcom городить.

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

@the_false · 13.11.2015, 21:48

Так, что можно поставить background-image и background-color отдельно. Вы-то говорили о том, чтобы они одновременно показывались, а при масштабировании - это другое. Общий фон и картинку сделать, не есть наложить градиент на картинку да еще и растягивать их пропорционально.

@Cdelphi78 · 13.11.2015, 23:19 **[ТС]**

Я имел ввиду что есть фоновое изображение определенного размера например 2000 на 2000, а за ним то идет не просто цвет по дефолту, а цвет -градиент то есть при масштабировании до минимума 30% во всех браузерах, просто ставить отдельно фоновое изображение и фон сайта мне кажется костылем.

@the_false · 13.11.2015, 23:53

Тогда только так, как было в примере с вашей аватаркой, только еще с позиционированием картинки. Но, как уже писал товарищ выше - поддерживается не так давно и кое-где может не сработать.

CSS

1
2

background: url([url]https://www.cyberforum.ru/customavatars/avatar457660_1.gif[/url]) center top no-repeat, 
-webkit-gradient( linear, left top, left bottom, color-stop(0, rgba(63,255,5,1)), color-stop(1, rgba(0,0,0,1)) );

@Cdelphi78 · 16.11.2015, 01:19 **[ТС]**

Короче возился возился с масштабированием, и взял просто сделал еще одну обертку #fon 2000х2000px туда запихал картинку фона, спозиционировал по центру и все нормально сейчас, а то при масштабировании до минимума все ехало кривось накось)))) да и градиент за ним теперь появился.

@Cdelphi78 140 / 74 / 18 Регистрация: 21.02.2014 Сообщений: 3,439
	13.11.2015, 15:38 [ТС]	3
	Все заработало, пасиб, странно у меня даже reset.css был подключен. Добавлено через 11 минут теперь другая проблема при добавлении туда же фонового изображения, оно пропадает, остается градиент, как их использовать градиент и фоновое изображение вместе? Добавлено через 1 минуту Теперь другая проблема при добавлении туда же в body фонового изображения оно пропадает, как испjльзовать вместе градиент и картинку? 0

@Almag13 27 / 28 / 16 Регистрация: 18.10.2015 Сообщений: 187
	13.11.2015, 17:42	6
	multiple backgound, сейчас возможно и работает со многими браузерами, раньше это было не совсем кроссбраузерное решение... Посмотреть тут 0

@Cdelphi78 140 / 74 / 18 Регистрация: 21.02.2014 Сообщений: 3,439
	13.11.2015, 20:37 [ТС]	7
	Без определения прозрачности можно сделать, если нет то тогда придется дополнительный блок с z-indekcom городить. Добавлено через 33 минуты а как же делают сайты где идет фоновое изображения а дальше обычный цвет при масштабировании 0

@the_false 0 / 0 / 1 Регистрация: 13.11.2015 Сообщений: 7
	13.11.2015, 21:48	8
	Так, что можно поставить background-image и background-color отдельно. Вы-то говорили о том, чтобы они одновременно показывались, а при масштабировании - это другое. Общий фон и картинку сделать, не есть наложить градиент на картинку да еще и растягивать их пропорционально. 0

@Cdelphi78 140 / 74 / 18 Регистрация: 21.02.2014 Сообщений: 3,439
	13.11.2015, 23:19 [ТС]	9
	Я имел ввиду что есть фоновое изображение определенного размера например 2000 на 2000, а за ним то идет не просто цвет по дефолту, а цвет -градиент то есть при масштабировании до минимума 30% во всех браузерах, просто ставить отдельно фоновое изображение и фон сайта мне кажется костылем. 0

@Cdelphi78 140 / 74 / 18 Регистрация: 21.02.2014 Сообщений: 3,439
	16.11.2015, 01:19 [ТС]	11
	Короче возился возился с масштабированием, и взял просто сделал еще одну обертку #fon 2000х2000px туда запихал картинку фона, спозиционировал по центру и все нормально сейчас, а то при масштабировании до минимума все ехало кривось накось)))) да и градиент за ним теперь появился. 0